<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth;">
<head>
    <meta charset="UTF-8">
    <title>P3R</title>
    <meta content="width=750,user-scalable=no" name="viewport">
    <!--    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">-->

    <link href="css/index.css" rel="stylesheet">
    <link href="css/mobile.css" rel="stylesheet">
    <script src="./js/jquery.js"></script>
    <script src="./js/vue.min.js"></script>

    <script src="./js/Elementjs.js"></script>
    <link href="./css/Elementcss.css" rel="stylesheet">
</head>
<body>
<main class="main">
    <div class="container" id="app">
        <!--导航栏-->
        <header>
            <div class="nav_box">
                <ul class="nav">
                    <li>Features</li>
                    <li>Game System</li>
                    <li>Character</li>
                    <li>DLC</li>
                    <li>Expansion Pass</li>
                    <li>Stores</li>
                </ul>

                <div class="news">NEWS</div>
            </div>
            <div class="menu_button">
                <span> </span>
                <span> </span>
                <span> </span>
                <span style="color:white;height:auto;text-align:center;background-color:transparent;border-bottom:0;font-size: larger">Menu</span>
            </div>

        </header>
        <!-- 入场加载 -->
        <section id="loading">
            <div class="content">
                <p style="font-size: 2rem;color:#243738;">Memento Mori</p>
                <p>Remember, You Will Die.<br/>
                    Time never waits.<br/>
                    It delivers all equally to the same end.</p>
            </div>
            <div class="wave-box">
                <svg class="waves" preserveAspectRatio="none" shape-rendering="auto"
                     viewBox="0 24 150 28" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                        <path d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
                              id="gentle-wave"/>
                    </defs>
                    <g class="parallax">
                        <use fill="rgba(2, 158, 235, 0.7" x="48" xlink:href="#gentle-wave" y="0"/>
                        <use fill="rgba(2, 158, 235, 0.5)" x="48" xlink:href="#gentle-wave" y="3"/>
                        <use fill="rgba(2, 158, 235, 0.2)" x="48" xlink:href="#gentle-wave" y="5"/>
                        <use fill="#029eeb" x="48" xlink:href="#gentle-wave" y="7"/>
                    </g>
                </svg>
            </div>
        </section>
        <!-- 首页 -->
        <section class="fv">
            <div class="fv_img">
                <img alt="PERSONA3 RELOAD"
                     class="PC_logo"
                     src="">
                <img alt="PERSONA3 RELOAD" class="mobile_logo"
                     class="v-sp"
                     src=""
                     style="display: none">
            </div>


            <div class="fv_text mobile_fv_text">
                <svg class="text" id="text" viewBox="0 0 318.02 86.82" xmlns="http://www.w3.org/2000/svg"
                >
                    <g>
                        <path class="cls-1"
                              d="m10.08.42c5.36,0,8.58,2.86,8.58,7.13,0,4.8-3.18,7.76-8.12,7.76-1.52,0-2.86-.35-3.6-.64v7.02c0,2.61.28,4.2,2.68,4.2v.21H1.29v-.21c2.4,0,2.54-1.59,2.54-4.2V4.83C3.84,2.22,3.69.63,1.29.63v-.21h8.79Zm5.29,7.24c0-3.74-1.84-6.67-5.75-6.67h-1.34c-.85,0-1.34.42-1.34,1.27v10.66c0,.81.39,1.62,2.72,1.62,3.35,0,5.72-2.44,5.72-6.88Z"></path>
                        <path class="cls-1"
                              d="m39.11,20.19l-.81,5.93h-17.79v-.21c2.4,0,2.54-1.59,2.54-4.2V4.83c0-2.61-.14-4.2-2.54-4.2v-.21h17.26l.46,5.29h-.21c-1.8-4.02-2.96-4.73-6.81-4.73h-5.05v11.47h3.95c3.18,0,3.88-.85,4.48-3.46h.21v7.73h-.21c-.6-2.51-1.31-3.71-4.48-3.71h-3.95v10.87c0,1.06.32,1.66,1.41,1.66h4.16c3.74,0,5.08-.64,7.17-5.37h.21Z"></path>
                        <path class="cls-1"
                              d="m62.11,25.91v.21c-.46.07-1.94.14-2.89.14-2.33,0-2.96-1.27-7.34-10.62-.67-1.34-1.41-1.59-2.54-1.59h-1.83v7.66c0,2.61.11,4.2,2.51,4.2v.21h-8.15v-.21c2.4,0,2.54-1.59,2.54-4.2V4.83c0-2.61-.14-4.2-2.54-4.2v-.21h8.75c5.43,0,8.58,2.68,8.58,6.78,0,3.49-2.68,5.65-5.75,6.49v.07c1.02.63,1.87,2.12,2.65,3.63,3.42,6.6,4.17,7.87,6.04,8.51Zm-14.61-12.42h2.65c3.85,0,5.75-2.22,5.75-6.07s-1.76-6.42-5.72-6.42h-1.34c-.85,0-1.34.42-1.34,1.27v11.22Z"></path>
                        <path class="cls-1"
                              d="m64.71,24.99l-.21-5.4h.21c1.41,4.34,3.95,6.46,7.06,6.46,2.86,0,5.54-1.94,5.54-5.33s-2.54-4.66-5.58-6.18l-1.76-.88c-2.51-1.24-4.94-2.86-4.94-6.63,0-4.02,2.96-7.02,7.16-7.02,1.94,0,4.55.63,6.25,1.52v4.2h-.21c-1.38-3.67-3.56-5.22-6.18-5.22-2.96,0-4.94,2.01-4.94,4.98s2.33,4.24,4.41,5.29l1.76.88c3.11,1.55,6.11,3.21,6.11,7.45s-3.25,7.45-8.05,7.45c-2.05,0-5.01-.63-6.63-1.55Z"></path>
                        <path class="cls-1"
                              d="m82.6,13.34c0-7.91,4.62-13.34,11.47-13.34s11.43,5.15,11.43,13.2-4.66,13.34-11.5,13.34-11.4-5.15-11.4-13.2Zm19.41-.07c0-7.13-2.86-12.78-8.01-12.78s-7.94,5.43-7.94,12.78,2.89,12.78,8.01,12.78,7.94-5.43,7.94-12.78Z"></path>
                        <path class="cls-1"
                              d="m123.03.42h6.6v.21c-2.4,0-2.75,2.44-2.75,6.18v19.66h-.21l-15.25-23.33v16.94c0,3.39.57,5.82,3.14,5.82v.21h-6.88v-.21c2.47,0,3.11-2.44,3.11-5.82V4.41c0-2.43-.99-3.49-3.11-3.78v-.21h5.65l12.92,19.91V6.81c0-3.74-.53-6.18-3.21-6.18v-.21Z"></path>
                        <path class="cls-1"
                              d="m149.54,21.6c1.06,2.96,1.73,4.16,3.21,4.31v.21h-8.05v-.21c1.98-.14,2.61-1.31,1.87-3.46l-1.87-5.33h-8.33l-.85,2.4c-1.45,4.17-1.48,6.18,1.06,6.39v.21h-5.82v-.21c1.69-.18,2.61-2.33,4.09-6.6L141.67.07h.28l7.59,21.53Zm-12.88-5.33h7.76l-3.88-11.12-3.88,11.12Z"></path>
                        <path class="cls-1"
                              d="m163.48,11.4c4.06,1.09,6.56,3.88,6.56,7.45,0,4.16-3.42,7.69-8.43,7.69-2.44,0-4.91-.74-6.42-1.66l.46-4.45h.21c.81,3.53,3,5.61,5.93,5.61,3.25,0,5.68-2.47,5.68-5.89s-2.54-6.18-6.81-6.81l-.67-.07-.07-.21,1.09-.67c2.26-1.38,4.94-3.28,4.94-6.6,0-2.65-1.83-4.13-4.2-4.13-3.11,0-5.05,2.65-5.44,4.76l-.25-.04c.42-3.46,2.86-6.39,6.95-6.39,3.35,0,5.44,2.01,5.44,4.83s-2.15,4.83-4.66,6.39l-.32.18Z"></path>
                        <path class="cls-1"
                              d="m202.97,25.91v.21c-.46.07-1.94.14-2.89.14-2.33,0-2.96-1.27-7.34-10.62-.67-1.34-1.41-1.59-2.54-1.59h-1.83v7.66c0,2.61.11,4.2,2.51,4.2v.21h-8.15v-.21c2.4,0,2.54-1.59,2.54-4.2V4.83c0-2.61-.14-4.2-2.54-4.2v-.21h8.75c5.43,0,8.58,2.68,8.58,6.78,0,3.49-2.68,5.65-5.75,6.49v.07c1.02.63,1.87,2.12,2.65,3.63,3.42,6.6,4.17,7.87,6.04,8.51Zm-14.61-12.42h2.65c3.85,0,5.75-2.22,5.75-6.07s-1.76-6.42-5.72-6.42h-1.34c-.85,0-1.34.42-1.34,1.27v11.22Z"></path>
                        <path class="cls-1"
                              d="m224.16,20.19l-.81,5.93h-17.79v-.21c2.4,0,2.54-1.59,2.54-4.2V4.83c0-2.61-.14-4.2-2.54-4.2v-.21h17.26l.46,5.29h-.21c-1.8-4.02-2.96-4.73-6.81-4.73h-5.05v11.47h3.95c3.18,0,3.88-.85,4.48-3.46h.21v7.73h-.21c-.6-2.51-1.31-3.71-4.48-3.71h-3.95v10.87c0,1.06.32,1.66,1.41,1.66h4.16c3.74,0,5.08-.64,7.17-5.37h.21Z"></path>
                        <path class="cls-1"
                              d="m226.91,26.12v-.21c2.4,0,2.54-1.59,2.54-4.2V4.83c0-2.61-.14-4.2-2.54-4.2v-.21h8.19v.21c-2.4,0-2.54,1.59-2.54,4.2v19.06c0,1.09.32,1.66,1.38,1.66h2.47c3.81,0,5.26-.85,7.45-5.68h.21l-.88,6.25h-16.27Z"></path>
                        <path class="cls-1"
                              d="m246.8,13.34c0-7.91,4.62-13.34,11.47-13.34s11.43,5.15,11.43,13.2-4.66,13.34-11.5,13.34-11.4-5.15-11.4-13.2Zm19.41-.07c0-7.13-2.86-12.78-8.01-12.78s-7.94,5.43-7.94,12.78,2.89,12.78,8.01,12.78,7.94-5.43,7.94-12.78Z"></path>
                        <path class="cls-1"
                              d="m288.78,21.6c1.06,2.96,1.73,4.16,3.21,4.31v.21h-8.05v-.21c1.98-.14,2.61-1.31,1.87-3.46l-1.87-5.33h-8.33l-.85,2.4c-1.45,4.17-1.48,6.18,1.06,6.39v.21h-5.82v-.21c1.69-.18,2.61-2.33,4.09-6.6L280.91.07h.28l7.59,21.53Zm-12.88-5.33h7.76l-3.88-11.12-3.88,11.12Z"></path>
                        <path class="cls-1"
                              d="m294.72,26.12v-.21c2.4,0,2.54-1.59,2.54-4.2V4.83c0-2.61-.14-4.2-2.54-4.2v-.21h10.23c8.05,0,12.67,4.59,12.67,12.53s-5.12,13.17-12.88,13.17h-10.02Zm19.41-12.95c0-7.09-3-12.18-9.42-12.18h-3c-.85,0-1.34.42-1.34,1.27v21.04c0,1.62.92,2.26,4.52,2.26,6.32,0,9.25-4.8,9.25-12.39Z"></path>
                    </g>
                    <g>
                        <path class="cls-1"
                              d="m23.48,44.77h10.1v.34c-3.67,0-4.21,3.92-4.21,9.94v31.65h-.32L5.72,49.14v27.28c0,5.46.86,9.38,4.8,9.38v.34H0v-.34c3.78,0,4.75-3.92,4.75-9.38v-25.23c0-3.92-1.51-5.63-4.75-6.08v-.34h8.64l19.76,32.05v-21.76c0-6.02-.81-9.94-4.91-9.94v-.34Z"></path>
                        <path class="cls-1"
                              d="m33.61,65.56c0-12.73,7.07-21.48,17.55-21.48s17.49,8.3,17.49,21.25-7.13,21.48-17.6,21.48-17.44-8.3-17.44-21.25Zm29.69-.11c0-11.48-4.37-20.57-12.25-20.57s-12.15,8.75-12.15,20.57,4.43,20.57,12.25,20.57,12.15-8.75,12.15-20.57Z"></path>
                        <path class="cls-1"
                              d="m106.86,44.77h8.91v.34c-2.75.34-4.16,3.64-6.15,10.63l-9.07,30.97h-.43l-8.8-28.47-9.88,28.47h-.43l-10.31-34.66c-1.4-4.72-2.65-6.71-4.91-6.93v-.34h12.58v.34c-3.29.23-4.21,1.93-3.19,5.4l8.21,27.67,7.4-21.59-1.4-4.55c-1.51-4.77-2.59-6.71-5.02-6.93v-.34h12.58v.34c-3.24.23-4.16,1.93-3.13,5.4l8.37,27.16,6.42-22.27c1.94-6.88,2.21-9.94-1.73-10.29v-.34Z"></path>
                        <path class="cls-1"
                              d="m126.73,65.56c0-12.73,7.07-21.48,17.55-21.48s17.49,8.3,17.49,21.25-7.13,21.48-17.6,21.48-17.44-8.3-17.44-21.25Zm29.69-.11c0-11.48-4.37-20.57-12.25-20.57s-12.15,8.75-12.15,20.57,4.43,20.57,12.25,20.57,12.15-8.75,12.15-20.57Z"></path>
                        <path class="cls-1"
                              d="m185.04,44.77h10.1v.34c-3.67,0-4.21,3.92-4.21,9.94v31.65h-.32l-23.32-37.56v27.28c0,5.46.86,9.38,4.8,9.38v.34h-10.53v-.34c3.78,0,4.75-3.92,4.75-9.38v-25.23c0-3.92-1.51-5.63-4.75-6.08v-.34h8.64l19.76,32.05v-21.76c0-6.02-.81-9.94-4.91-9.94v-.34Z"></path>
                        <path class="cls-1"
                              d="m207.71,84.31l-.32-8.69h.32c2.16,6.99,6.05,10.4,10.8,10.4,4.37,0,8.48-3.12,8.48-8.58s-3.89-7.5-8.53-9.94l-2.7-1.42c-3.83-1.99-7.56-4.6-7.56-10.68,0-6.48,4.53-11.31,10.96-11.31,2.97,0,6.96,1.02,9.56,2.44v6.76h-.32c-2.11-5.91-5.45-8.41-9.45-8.41-4.54,0-7.56,3.24-7.56,8.01s3.56,6.82,6.75,8.52l2.7,1.42c4.75,2.5,9.34,5.17,9.34,11.99s-4.97,11.99-12.31,11.99c-3.13,0-7.67-1.02-10.15-2.5Z"></path>
                        <path class="cls-1"
                              d="m257.07,78.86c1.62,4.77,2.65,6.71,4.91,6.93v.34h-12.31v-.34c3.02-.23,4-2.1,2.86-5.57l-2.86-8.58h-12.74l-1.29,3.86c-2.21,6.71-2.27,9.94,1.62,10.29v.34h-8.91v-.34c2.59-.28,4-3.75,6.26-10.63l10.42-30.97h.43l11.61,34.66Zm-19.7-8.58h11.88l-5.94-17.9-5.94,17.9Z"></path>
                        <path class="cls-1"
                              d="m262.7,86.13v-.34c3.67,0,3.89-2.56,3.89-6.76v-27.16c0-4.21-.22-6.76-3.89-6.76v-.34h12.53v.34c-3.67,0-3.89,2.56-3.89,6.76v30.68c0,1.76.49,2.67,2.11,2.67h3.78c5.83,0,8.04-1.36,11.39-9.15h.32l-1.35,10.06h-24.89Z"></path>
                        <path class="cls-1"
                              d="m318.02,76.59l-1.24,9.55h-27.21v-.34c3.67,0,3.89-2.56,3.89-6.76v-27.16c0-4.21-.22-6.76-3.89-6.76v-.34h26.4l.7,8.52h-.32c-2.75-6.48-4.54-7.61-10.42-7.61h-7.72v18.47h6.05c4.86,0,5.94-1.36,6.86-5.57h.32v12.44h-.32c-.92-4.03-2-5.97-6.86-5.97h-6.05v17.5c0,1.71.49,2.67,2.16,2.67h6.37c5.72,0,7.77-1.02,10.96-8.64h.32Z"></path>
                    </g>
                </svg>

                <svg class="text" data-name="text_2" id="text_2" viewBox="0 0 424.59 99.8"
                     xmlns="http://www.w3.org/2000/svg">
                    <g data-name="レイヤー 1" id="FV_text-2">
                        <g>
                            <path class="cls-1"
                                  d="m8.94.43c5.46,0,8.72,2.91,8.72,7.25,0,4.88-3.23,7.9-8.26,7.9-1.54,0-2.91-.36-3.66-.65v7.14c0,2.66.29,4.27,2.73,4.27v.22H0v-.22c2.44,0,2.58-1.62,2.58-4.27V4.92C2.58,2.26,2.44.65,0,.65v-.21h8.94Zm5.38,7.36c0-3.81-1.87-6.79-5.85-6.79h-1.37c-.86,0-1.36.43-1.36,1.29v10.84c0,.83.39,1.65,2.76,1.65,3.41,0,5.82-2.48,5.82-7Z"></path>
                            <path class="cls-1"
                                  d="m38.46,20.54l-.83,6.03h-18.1v-.22c2.44,0,2.59-1.62,2.59-4.27V4.92c0-2.66-.14-4.27-2.59-4.27v-.21h17.56l.47,5.38h-.21c-1.83-4.09-3.02-4.81-6.93-4.81h-5.13v11.67h4.02c3.23,0,3.95-.86,4.56-3.52h.21v7.86h-.21c-.61-2.55-1.33-3.77-4.56-3.77h-4.02v11.06c0,1.08.32,1.69,1.44,1.69h4.24c3.8,0,5.17-.65,7.29-5.46h.22Z"></path>
                            <path class="cls-1"
                                  d="m61.86,26.35v.22c-.47.07-1.97.14-2.95.14-2.37,0-3.02-1.29-7.47-10.81-.68-1.36-1.44-1.62-2.59-1.62h-1.87v7.79c0,2.66.11,4.27,2.55,4.27v.22h-8.29v-.22c2.44,0,2.59-1.62,2.59-4.27V4.92c0-2.66-.14-4.27-2.59-4.27v-.21h8.9c5.53,0,8.72,2.73,8.72,6.89,0,3.55-2.73,5.75-5.85,6.61v.07c1.04.65,1.9,2.15,2.69,3.7,3.48,6.71,4.24,8.01,6.14,8.65Zm-14.87-12.64h2.69c3.91,0,5.85-2.26,5.85-6.18s-1.79-6.53-5.82-6.53h-1.36c-.86,0-1.37.43-1.37,1.29v11.42Z"></path>
                            <path class="cls-1"
                                  d="m64.49,25.42l-.21-5.49h.21c1.44,4.42,4.02,6.57,7.18,6.57,2.91,0,5.64-1.97,5.64-5.42s-2.59-4.74-5.67-6.28l-1.8-.9c-2.55-1.26-5.03-2.91-5.03-6.75,0-4.09,3.02-7.14,7.29-7.14,1.97,0,4.63.65,6.35,1.54v4.27h-.21c-1.4-3.73-3.63-5.31-6.28-5.31-3.02,0-5.03,2.05-5.03,5.06s2.37,4.31,4.49,5.39l1.79.9c3.16,1.58,6.21,3.27,6.21,7.58s-3.3,7.58-8.19,7.58c-2.08,0-5.1-.65-6.75-1.58Z"></path>
                            <path class="cls-1"
                                  d="m82.69,13.57c0-8.04,4.7-13.57,11.67-13.57s11.63,5.24,11.63,13.43-4.74,13.57-11.71,13.57-11.6-5.24-11.6-13.43Zm19.75-.07c0-7.25-2.91-13-8.15-13s-8.08,5.53-8.08,13,2.94,13,8.15,13,8.08-5.53,8.08-13Z"></path>
                            <path class="cls-1"
                                  d="m123.81.43h6.71v.21c-2.44,0-2.8,2.48-2.8,6.28v20h-.21l-15.51-23.73v17.23c0,3.45.57,5.92,3.2,5.92v.22h-7v-.22c2.51,0,3.16-2.48,3.16-5.92V4.49c0-2.48-1-3.55-3.16-3.84v-.21h5.74l13.14,20.25V6.93c0-3.81-.54-6.28-3.27-6.28v-.21Z"></path>
                            <path class="cls-1"
                                  d="m150.77,21.97c1.08,3.02,1.76,4.24,3.27,4.38v.22h-8.19v-.22c2.01-.14,2.66-1.33,1.9-3.52l-1.9-5.42h-8.47l-.86,2.44c-1.47,4.24-1.51,6.28,1.08,6.5v.22h-5.92v-.22c1.72-.18,2.66-2.37,4.16-6.71L142.77.07h.29l7.72,21.9Zm-13.11-5.42h7.9l-3.95-11.31-3.95,11.31Z"></path>
                            <path class="cls-1"
                                  d="m164.95,11.6c4.13,1.11,6.68,3.95,6.68,7.58,0,4.24-3.48,7.83-8.58,7.83-2.48,0-4.99-.75-6.54-1.69l.47-4.52h.22c.82,3.59,3.05,5.71,6.03,5.71,3.3,0,5.78-2.51,5.78-6s-2.59-6.28-6.93-6.93l-.68-.07-.07-.21,1.11-.68c2.3-1.4,5.03-3.34,5.03-6.71,0-2.69-1.87-4.2-4.27-4.2-3.16,0-5.13,2.69-5.53,4.85l-.25-.04c.43-3.52,2.91-6.5,7.07-6.5,3.41,0,5.53,2.05,5.53,4.92s-2.19,4.92-4.74,6.5l-.32.18Z"></path>
                            <path class="cls-1"
                                  d="m205.12,26.35v.22c-.47.07-1.97.14-2.95.14-2.37,0-3.02-1.29-7.47-10.81-.68-1.36-1.44-1.62-2.59-1.62h-1.87v7.79c0,2.66.11,4.27,2.55,4.27v.22h-8.29v-.22c2.44,0,2.59-1.62,2.59-4.27V4.92c0-2.66-.14-4.27-2.59-4.27v-.21h8.9c5.53,0,8.72,2.73,8.72,6.89,0,3.55-2.73,5.75-5.85,6.61v.07c1.04.65,1.9,2.15,2.69,3.7,3.48,6.71,4.24,8.01,6.14,8.65Zm-14.87-12.64h2.69c3.91,0,5.85-2.26,5.85-6.18s-1.79-6.53-5.82-6.53h-1.36c-.86,0-1.37.43-1.37,1.29v11.42Z"></path>
                            <path class="cls-1"
                                  d="m226.68,20.54l-.83,6.03h-18.1v-.22c2.44,0,2.59-1.62,2.59-4.27V4.92c0-2.66-.14-4.27-2.59-4.27v-.21h17.56l.47,5.38h-.21c-1.83-4.09-3.02-4.81-6.93-4.81h-5.13v11.67h4.02c3.23,0,3.95-.86,4.56-3.52h.21v7.86h-.21c-.61-2.55-1.33-3.77-4.56-3.77h-4.02v11.06c0,1.08.32,1.69,1.44,1.69h4.24c3.8,0,5.17-.65,7.29-5.46h.22Z"></path>
                            <path class="cls-1"
                                  d="m229.47,26.57v-.22c2.44,0,2.59-1.62,2.59-4.27V4.92c0-2.66-.14-4.27-2.59-4.27v-.21h8.33v.21c-2.44,0-2.59,1.62-2.59,4.27v19.39c0,1.11.32,1.69,1.4,1.69h2.51c3.88,0,5.35-.86,7.58-5.78h.21l-.9,6.36h-16.55Z"></path>
                            <path class="cls-1"
                                  d="m249.7,13.57c0-8.04,4.7-13.57,11.67-13.57s11.63,5.24,11.63,13.43-4.74,13.57-11.71,13.57-11.6-5.24-11.6-13.43Zm19.75-.07c0-7.25-2.91-13-8.15-13s-8.08,5.53-8.08,13,2.94,13,8.15,13,8.08-5.53,8.08-13Z"></path>
                            <path class="cls-1"
                                  d="m292.4,21.97c1.08,3.02,1.76,4.24,3.27,4.38v.22h-8.19v-.22c2.01-.14,2.66-1.33,1.9-3.52l-1.9-5.42h-8.47l-.86,2.44c-1.47,4.24-1.51,6.28,1.08,6.5v.22h-5.92v-.22c1.72-.18,2.66-2.37,4.16-6.71L284.39.07h.29l7.72,21.9Zm-13.11-5.42h7.9l-3.95-11.31-3.95,11.31Z"></path>
                            <path class="cls-1"
                                  d="m298.44,26.57v-.22c2.44,0,2.58-1.62,2.58-4.27V4.92c0-2.66-.14-4.27-2.58-4.27v-.21h10.41c8.19,0,12.89,4.67,12.89,12.75s-5.21,13.39-13.11,13.39h-10.2Zm19.75-13.18c0-7.22-3.05-12.39-9.59-12.39h-3.05c-.86,0-1.36.43-1.36,1.29v21.4c0,1.65.93,2.3,4.6,2.3,6.43,0,9.41-4.88,9.41-12.6Z"></path>
                        </g>
                        <g>
                            <path class="cls-1"
                                  d="m30.47,48h13.09v.42c-4.76,0-5.46,4.83-5.46,12.25v38.99h-.42L7.44,53.39v33.6c0,6.72,1.12,11.55,6.23,11.55v.42H.01v-.42c4.9,0,6.16-4.83,6.16-11.55v-31.08c0-4.83-1.96-6.93-6.16-7.49v-.42h11.2l25.62,39.48v-26.81c0-7.42-1.05-12.25-6.37-12.25v-.42Z"></path>
                            <path class="cls-1"
                                  d="m44.7,73.62c0-15.68,9.17-26.46,22.75-26.46s22.68,10.22,22.68,26.18-9.24,26.46-22.82,26.46-22.61-10.22-22.61-26.18Zm38.5-.14c0-14.14-5.67-25.34-15.89-25.34s-15.75,10.78-15.75,25.34,5.74,25.34,15.89,25.34,15.75-10.78,15.75-25.34Z"></path>
                            <path class="cls-1"
                                  d="m140.73,48h11.55v.42c-3.57.42-5.39,4.48-7.98,13.09l-11.76,38.15h-.56l-11.41-35.07-12.81,35.07h-.56l-13.37-42.71c-1.82-5.81-3.43-8.26-6.37-8.54v-.42h16.31v.42c-4.27.28-5.46,2.38-4.13,6.65l10.64,34.09,9.59-26.6-1.82-5.6c-1.96-5.88-3.36-8.26-6.51-8.54v-.42h16.31v.42c-4.2.28-5.39,2.38-4.06,6.65l10.85,33.46,8.33-27.44c2.52-8.47,2.87-12.25-2.24-12.67v-.42Z"></path>
                            <path class="cls-1"
                                  d="m169.28,73.62c0-15.68,9.17-26.46,22.75-26.46s22.68,10.22,22.68,26.18-9.24,26.46-22.82,26.46-22.61-10.22-22.61-26.18Zm38.5-.14c0-14.14-5.67-25.34-15.89-25.34s-15.75,10.78-15.75,25.34,5.74,25.34,15.89,25.34,15.75-10.78,15.75-25.34Z"></path>
                            <path class="cls-1"
                                  d="m245.97,48h13.09v.42c-4.76,0-5.46,4.83-5.46,12.25v38.99h-.42l-30.24-46.28v33.6c0,6.72,1.12,11.55,6.23,11.55v.42h-13.65v-.42c4.9,0,6.16-4.83,6.16-11.55v-31.08c0-4.83-1.96-6.93-6.16-7.49v-.42h11.2l25.62,39.48v-26.81c0-7.42-1.05-12.25-6.37-12.25v-.42Z"></path>
                            <path class="cls-1"
                                  d="m278.17,96.72l-.42-10.71h.42c2.8,8.61,7.84,12.81,14,12.81,5.67,0,10.99-3.85,10.99-10.57s-5.04-9.24-11.06-12.25l-3.5-1.75c-4.97-2.45-9.8-5.67-9.8-13.16,0-7.98,5.88-13.93,14.21-13.93,3.85,0,9.03,1.26,12.39,3.01v8.33h-.42c-2.73-7.28-7.07-10.36-12.25-10.36-5.88,0-9.8,3.99-9.8,9.87s4.62,8.4,8.75,10.5l3.5,1.75c6.16,3.08,12.11,6.37,12.11,14.77s-6.44,14.77-15.96,14.77c-4.06,0-9.94-1.26-13.16-3.08Z"></path>
                            <path class="cls-1"
                                  d="m343.26,90c2.1,5.88,3.43,8.26,6.37,8.54v.42h-15.96v-.42c3.92-.28,5.18-2.59,3.71-6.86l-3.71-10.57h-16.52l-1.68,4.76c-2.87,8.26-2.94,12.25,2.1,12.67v.42h-11.55v-.42c3.36-.35,5.18-4.62,8.12-13.09l13.51-38.15h.56l15.05,42.7Zm-25.55-10.57h15.4l-7.7-22.05-7.7,22.05Z"></path>
                            <path class="cls-1"
                                  d="m351.73,98.96v-.42c4.76,0,5.04-3.15,5.04-8.33v-33.46c0-5.18-.28-8.33-5.04-8.33v-.42h16.24v.42c-4.76,0-5.04,3.15-5.04,8.33v37.8c0,2.17.63,3.29,2.73,3.29h4.9c7.56,0,10.43-1.68,14.77-11.27h.42l-1.75,12.39h-32.27Z"></path>
                            <path class="cls-1"
                                  d="m424.59,87.2l-1.61,11.76h-35.28v-.42c4.76,0,5.04-3.15,5.04-8.33v-33.46c0-5.18-.28-8.33-5.04-8.33v-.42h34.23l.91,10.5h-.42c-3.57-7.98-5.88-9.38-13.51-9.38h-10.01v22.75h7.84c6.3,0,7.7-1.68,8.89-6.86h.42v15.33h-.42c-1.19-4.97-2.59-7.35-8.89-7.35h-7.84v21.56c0,2.1.63,3.29,2.8,3.29h8.26c7.42,0,10.08-1.26,14.21-10.64h.42Z"></path>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="fv_movie">
                <video class="movie-box" id="fv1" muted preload="auto" style="z-index: 0;">
                    <source id="fv1_source" src="/fv_movie1.mp4" type="video/mp4"/>
                </video>
                <video class="movie-box movie-box-position" id="fv2" loop muted preload="auto">
                    <source id="fv2_source" src="/fv_movie2.mp4" type="video/mp4"/>
                </video>
            </div>
            <div class="fv_scroll">
                <span style="margin-bottom: 1rem">SCROLL</span>
                <div class="scroll"></div>
            </div>
        </section>
        <!--playTrailer-->
        <section class="playTrailer">
            <p class="playTrailerText">PLAY TRAILER </p>
            <?xml version="1.0" encoding="UTF-8"?>
            <svg fill="none" height="26" id="fv_rightArrowhead" viewBox="0 0 48 48" width="26"
                 xmlns="http://www.w3.org/2000/svg">
                <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333" stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="4"/>
                <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333" stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="4"/>
            </svg>

        </section>
        <!--BuyNow-->
        <section class="SPadding buyNow-container">
            <div class="contents">
                <!--             BUYNOW  -->
                <h2 class="buy-now run">
                    <svg data-name="レイヤー 1" id="buynow-text"
                         viewBox="0 0 455.24 78.41" xmlns="http://www.w3.org/2000/svg">
                        <g id="Dlc-title">
                            <g>
                                <path class="cls-1"
                                      d="m33.7,39c10.5,1.2,20.4,7.9,20.4,19.4,0,10.8-9.4,18.8-27.1,18.8H0v-.6c6.8,0,7.2-4.5,7.2-11.9V16.9c0-7.4-.4-11.9-7.2-11.9v-.6h25.6c16.6,0,24.7,6.8,24.7,17.1,0,10.9-8.8,15.8-16.6,17.3v.2ZM19.8,6c-2.4,0-3.8,1.2-3.8,3.6v28.9h8c12,0,17-6.4,17-15.5,0-10.5-5.9-17-17.1-17h-4.1Zm24.6,52.1c0-11.2-7.4-18-20-18h-8.4v29.1c0,2.7,0,6.4,8.9,6.4,12.3,0,19.5-6.4,19.5-17.5Z"></path>
                                <path class="cls-1"
                                      d="m66.21,53.4V16.9c0-7.4-.4-11.9-7.2-11.9v-.6h23.3v.6c-6.8,0-7.2,4.5-7.2,11.9v35.8c0,16.2,5.1,23.3,17.4,23.3s19.4-7.1,19.4-22.8v-30.7c0-9.8-1.6-17.5-8.4-17.5v-.6h18v.6c-6.8,0-7.8,7.7-7.8,17.5v30.7c0,16.9-7.8,25.2-22.9,25.2-16,0-24.6-7.9-24.6-25Z"></path>
                                <path class="cls-1"
                                      d="m166.7,4.4h16.5v.6c-5.5.5-10.1,8-15.6,18.9l-10.3,20.2v20.6c0,7.4.4,11.9,7.2,11.9v.6h-23.2v-.6c6.8,0,7.2-4.5,7.2-11.9v-18.9l-14.6-28.6c-4.6-8.9-6.5-11.7-9.6-12.2v-.6h22.7v.6c-6,.4-7.5,3.9-4.6,9.5l13.9,27.4,9.5-18.6c5.8-11.5,7.5-17.4.9-18.3v-.6Z"></path>
                                <path class="cls-1"
                                      d="m256.5,4.4h18.7v.6c-6.8,0-7.8,6.9-7.8,17.5v55.7h-.6L223.6,12.1v48c0,9.6,1.6,16.5,8.9,16.5v.6h-19.5v-.6c7,0,8.8-6.9,8.8-16.5V15.7c0-6.9-2.8-9.9-8.8-10.7v-.6h16l36.6,56.4V22.5c0-10.6-1.5-17.5-9.1-17.5v-.6Z"></path>
                                <path class="cls-1"
                                      d="m280.77,41c0-22.4,13.1-37.8,32.5-37.8s32.4,14.6,32.4,37.4-13.2,37.8-32.6,37.8-32.3-14.6-32.3-37.4Zm55-.2c0-20.2-8.1-36.2-22.7-36.2s-22.5,15.4-22.5,36.2,8.2,36.2,22.7,36.2,22.5-15.4,22.5-36.2Z"></path>
                                <path class="cls-1"
                                      d="m421.89,4.4h16.5v.6c-5.1.6-7.7,6.4-11.4,18.7l-16.8,54.5h-.8l-16.3-50.1-18.3,50.1h-.8l-19.1-61c-2.6-8.3-4.9-11.8-9.1-12.2v-.6h23.3v.6c-6.1.4-7.8,3.4-5.9,9.5l15.2,48.7,13.7-38-2.6-8c-2.8-8.4-4.8-11.8-9.3-12.2v-.6h23.3v.6c-6,.4-7.7,3.4-5.8,9.5l15.5,47.8,11.9-39.2c3.6-12.1,4.1-17.5-3.2-18.1v-.6Z"></path>
                                <path class="cls-1"
                                      d="m443.74,72.7c0-3.2,2.7-5.8,5.8-5.8s5.7,2.6,5.7,5.8-2.6,5.7-5.7,5.7-5.8-2.6-5.8-5.7Zm5.4-14.6c-1.4-17.8-4.5-51.2-4.5-53.4,0-2.4,2.1-4.7,4.9-4.7s4.9,2.4,4.9,4.7-3.1,35.6-4.5,53.4h-.8Z"></path>
                            </g>
                        </g>
                    </svg>
                </h2>
                <!-- 限定版本-->
                <div class="limited-box">
                    <span>盒装版</span>
                    <span>下载版</span>

                </div>


                <img alt="數量有限 PERSONA3 RELOAD LIMITED BOX"

                     src=""
                     style="width: 80%">
                <img alt="內含粉絲必須收藏的物品，數量有限的豪華版！"
                     class="img-margin"
                     src=""
                     style="width: 47%;">
                <img alt="台灣 2,590 NT＄ / 香港 648 HKD"
                     class="img-margin"
                     src=""
                     style="width: 64%;">
                <!--盒装版内容-->
                <div class="box-version-contents img-margin">
                    <!--左图片-->
                    <div class="left">
                        <img alt="" class="limited-img" src="img/product_limited-box.webp" style="width: 100%;">
                        <p>※數量有限，售完即止。</p>
                        <p> ※圖像均為製作中的示意圖。內容有可能未經預告進行變更。</p>
                        <p>※「PERSONA3 RELOAD LIMITED BOX Original Sound
                            Track」所收錄的樂曲在遊戲發售一定期間之後有可能會以數位下載或另售的CD形式進行販售。</p>
                        <p>※「P4G八十神高級中學服裝套組」＆「P4G人格面具套組」DLC有預定個別發售。</p>
                        <div>
                            <a class="attention-a">S.E.E.S.制式戰鬥服臂章　注意事項</a>
                            <ul class="attention-ul">
                                <div style="overflow: hidden;font-size: small;color: #1d384a;">
                                    • 請勿交給未滿3歲的小孩子使用。<br/>
                                    • 捆包材料請勿放入口中。另外，請收藏在小孩子無法靠近的地方，或是立刻丟棄。有可能意外造成窒息等危險。<br/>
                                    • 此物品之設計為鑑賞用。<br/>
                                    • 雖然設計為可穿戴的樣式，但若遇到不符合自身尺寸的狀況時，請勿勉強穿戴。<br/>
                                    • 穿戴本物品時請勿過度揮動手臂或進行激烈運動。<br/>
                                    • 若以粗魯的方式使用將造成破損，還請務必留意。<br/>
                                    • 請勿收藏於靠近火源、熱源、直射日光等高溫多濕之處，有可能因此造成褪色、變色，或是引起火災。<br/>
                                    • 請勿使用於原本設計目的以外的用途。<br/>
                                    • 如遇破損，請立刻停止使用。<br/>
                                    • 依據使用狀況、使用頻率、環境變化等因素，有可能導致劣化。<br/>
                                    • 在水、汗、摩擦等諸多條件下，有可能導致褪色、染色、變色等狀況。<br/>
                                    • 在附著水、汗的情形下，有可能導致金屬零件生鏽。<br/>
                                    • 不可水洗。如有髒汙，請使用毛巾等布料沾水後擰乾，將此物品上的髒汙擦除。<br/>
                                </div>
                            </ul>
                        </div>
                    </div>


                    <!--右文字-->
                    <div class="right">
                        <!--v-model="activeNames"-->
                        <el-collapse>
                            <el-collapse-item name="1" title="同捆物"></el-collapse-item>
                            <el-collapse-item name="2" title="S.E.E.S. 制式戰鬥服臂章">
                                完全重現新設計的S.E.E.S.臂章！只能藉由此管道獲得的豪華臂章。 只要穿戴此臂章，您也能成為S.E.E.S.的一員！

                            </el-collapse-item>
                            <el-collapse-item name="3" title="PERSONA3 RELOAD ART BOOK">
                                大量收錄本作品美術相關資料，包括角色插圖、設定畫、背景美術資料以及遊戲內插圖素材等等！
                                總計64頁、B5硬殼封面的豪華美術書。
                            </el-collapse-item>
                            <el-collapse-item name="4" title="PERSONA3 RELOAD LIMITED BOX Original Sound Track">
                                收錄ATLUS Sound
                                Team為本作品製作的樂曲。除了有將《女神異聞錄３》樂曲重新編曲的Reload版樂曲之外，也有收錄全新樂曲！總計60首樂曲、2張CD套組的豪華完整原聲帶。

                            </el-collapse-item>
                            <el-collapse-item name="5" title="P4G 八十神高級中學服裝套組＆P4G人格面具套組 DLC">
                                此套組內含２種DLC，分別為可在本作品中穿著《女神異聞錄４ 黃金版》中登場的八十神高級中學制服，以及可召喚《女神異聞錄４
                                黃金版》中登場的人格面具：伊邪那岐、禍津伊邪那岐、輝夜。
                            </el-collapse-item>
                            <el-collapse-item name="6" title="遊戲軟體（PS5™/ PS4™盒裝版）">
                            </el-collapse-item>
                        </el-collapse>


                    </div>
                </div>
            </div>
            <!--盒装版-->
            <div class="package flex jc-c ai-c">
                <div class="box flex ai-c">
                    <div class="item-package-img">
                        <img alt="" src="img/product_package2.webp">
                    </div>
                    <div class="item-package-text">
                        <img alt="普通盒裝版" class="textImg1"
                             class="v-pc"
                             src="">
                        <p style="padding: 5% 0;font-weight: bold">『女神異聞錄３ Reload』遊戲軟件（盒裝版）</p>
                        <img alt="" class="textImg2"
                             src="">
                    </div>

                </div>
                <img alt="販售店鋪與店舖特典列表" class="good-list"
                     src="">
            </div>

            <!--先行特典-->

            <div class="extra flex jc-c ai-c flexD-col">
                <img alt="先行購買特典「DLC：P4G BGM套組」"
                     class="v-pc"
                     src=""
                     style="width: 85%">
                <img alt="此DLC可供玩家聆聽《女神異聞錄4 黃金版》登場的樂曲"
                     class="v-pc"
                     src=""
                     style="width: 52%;margin: 1% 0 0 ">
                <img alt="收錄樂曲"
                     class="song"
                     src="">
            </div>
        </section>
        <!--DLC-->
        <section class="DLC flex flexD-col jc-c ai-c">

            <h2 style="width: 20%;">
                <svg data-name="レイヤー 1" id="_レイヤー_1" viewBox="0 0 181 76" xmlns="http://www.w3.org/2000/svg">
                    <g id="Dlc-title">
                        <g>
                            <path d="M28.4934 74H0.0933838V73.4C6.89338 73.4 7.29338 68.9 7.29338 61.5V13.7C7.29338 6.3 6.89338 1.8 0.0933838 1.8V1.2H29.0934C51.8934 1.2 64.9934 14.2 64.9934 36.7C64.9934 59.7 50.4934 74 28.4934 74ZM28.8934 72.4C46.7934 72.4 55.0934 58.8 55.0934 37.3C55.0934 17.2 46.5934 2.8 28.3934 2.8H19.8934C17.4934 2.8 16.0934 3.99999 16.0934 6.39999V66C16.0934 70.6 18.6934 72.4 28.8934 72.4Z"
                                  fill="#1D384A"></path>
                            <path d="M116.967 74H70.8668V73.4C77.6668 73.4 78.0668 68.9 78.0668 61.5V13.7C78.0668 6.3 77.6668 1.8 70.8668 1.8V1.2H94.0668V1.8C87.2668 1.8 86.8668 6.3 86.8668 13.7V67.7C86.8668 70.8 87.7668 72.4 90.7668 72.4H97.7668C108.567 72.4 112.667 70 118.867 56.3H119.467L116.967 74Z"
                                  fill="#1D384A"></path>
                            <path d="M158.072 75.2C138.672 75.2 124.572 60.2 124.572 37.8C124.572 15.4 138.572 0 158.072 0C168.472 0 175.172 2.99999 179.672 5.39999L180.272 17.5H179.672C175.072 6.6 168.272 1.4 157.872 1.4C143.972 1.4 134.372 16.8 134.372 37.7C134.372 58.3 144.172 73.8 157.872 73.8C168.272 73.8 175.972 68.1 180.272 55.9H180.872L179.272 70.1C174.672 72.4 167.872 75.2 158.072 75.2Z"
                                  fill="#1D384A"></path>
                        </g>
                    </g>
                </svg>
            </h2>
            <p>準備了以下DLC：能更改在塔耳塔羅斯探索與戰鬥時的外觀、BGM，</p>
            <p style="margin-bottom: 5%"> 還能解鎖特別人格面具的合體並可在戰鬥中使用。</p>
            <img alt="DLC" src="/img/dlc.webp" style="margin-bottom: 5%">
            <img alt="btn" src="/img/dlc_link_btn.webp">

        </section>
        <!--故事-->
        <section class="story flex flexD-col jc-c ai-c">
            <!--introduction-->
            <div class="introduction flex jc-end">
                <div class="text" style="flex: 0.3">
                    <h3 class="title">
                        <svg data-name="レイヤー 1" id="_レイヤー_1" viewBox="0 0 524.24 79.41"
                             xmlns="http://www.w3.org/2000/svg">
                            <g id="Introduction-title">
                                <g>
                                    <path class="cls-1"
                                          d="M0,78.21v-.6c6.8,0,7.2-4.5,7.2-11.9V17.9c0-7.4-.4-11.9-7.2-11.9v-.6H23.2v.6c-6.8,0-7.2,4.5-7.2,11.9v47.8c0,7.4,.4,11.9,7.2,11.9v.6H0Z"></path>
                                    <path class="cls-1"
                                          d="M73.75,67.8c0,6.4,.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-25.4c0-7.6-2.4-12.4-9.4-12.4-4.4,0-9.2,2.2-13.5,5.6v32.2c0,6.4,.3,9.8,4.4,9.8v.6H30.25v-.6c4.1,0,4.4-3.4,4.4-9.8v-29c0-6.4-1.7-8.5-5.1-9.4v-.6l12.8-4h.4v9.8c5.3-5.5,11.6-10,18.3-10,7.8,0,12.7,5.5,12.7,15.6v27.6Z"></path>
                                    <path class="cls-1"
                                          d="M114.78,70.1c-4.7,5.9-10.7,9.3-15.9,9.3-7.4,0-11.7-4.1-11.7-12.6V29.5h-5.2v-1.1l1.4-.6c4.9-2.1,8.4-6.1,11.3-15.1h.6v13.1h18.7l-1.4,3.7h-17.3v36.4c0,5.9,2.7,9,7.9,9,4,0,8-2.4,11-5.2l.6,.4Z"></path>
                                    <path class="cls-1"
                                          d="M149.67,25.4l-2,8.6h-.6c-2.2-1.5-4.8-2.4-6.9-2.4-2.7,0-5.3,1.5-8,5.3v30.9c0,6.4,.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-29c0-6.4-1.7-8.5-5.1-9.4v-.6l12.8-4h.4v10.7c4.1-6.3,8.5-10.9,13.6-10.9,1.2,0,2.5,.2,3.9,.8Z"></path>
                                    <path class="cls-1"
                                          d="M152.57,52.2c0-16.6,10.4-27.6,24.4-27.6s24.1,10.4,24.1,27.2-10.4,27.6-24.3,27.6-24.2-10.4-24.2-27.2Zm39.7-.2c0-14.5-5.4-26-15.5-26s-15.4,10.9-15.4,26,5.5,26,15.6,26,15.3-10.9,15.3-26Z"></path>
                                    <path class="cls-1"
                                          d="M252.73,65.9c0,6.4,1.6,8.8,5.1,9.8v.6l-11.1,3.1h-.4l-1.6-9.7c-3.9,5.4-9.1,9.7-16.3,9.7-11.7,0-20-10.9-20-26.4,0-17.1,10.5-28.4,24.4-28.4,4.5,0,8.5,1.3,11.8,3.3V13.2c0-6.4-1.7-8.5-5.1-9.4v-.6l12.8-3.2h.4V65.9Zm-8.1,2.5v-27c0-8.9-4.5-15.4-12.2-15.4-10.2,0-15.3,11.6-15.3,24.4s5.1,24.5,15.3,24.5c5.1,0,9.1-2.9,12.2-6.5Z"></path>
                                    <path class="cls-1"
                                          d="M305.7,65.9c0,6.4,1.6,8.8,5.1,9.8v.6l-11.1,3.1h-.4l-1.7-10c-5.3,5.5-11.6,10-18.3,10-7.8,0-12.7-5.5-12.7-15.6v-27.9c0-6.4-1.9-8.2-5.3-9.1v-.6l13-1.4h.4V61.6c0,7.6,2.4,12.4,9.4,12.4,4.4,0,9.2-2.2,13.5-5.5V35.9c0-6.4-1.9-8.2-5.3-9.1v-.6l13-1.4h.4v41.1Z"></path>
                                    <path class="cls-1"
                                          d="M316,52.8c0-16.5,10.7-28.2,23.6-28.2,7.1,0,13.5,3.6,16.9,8.5l-4,6h-.6c-2-7.5-5.6-13.1-12.3-13.1-9.6,0-15.1,11-15.1,23.3,0,13.9,5.7,25.1,16.5,25.1,7.2,0,12.7-4.2,15.8-8.7l.6,.4c-3.5,6.1-9.5,13.3-20,13.3-13.3,0-21.4-11.7-21.4-26.6Z"></path>
                                    <path class="cls-1"
                                          d="M394.51,70.1c-4.7,5.9-10.7,9.3-15.9,9.3-7.4,0-11.7-4.1-11.7-12.6V29.5h-5.2v-1.1l1.4-.6c4.9-2.1,8.4-6.1,11.3-15.1h.6v13.1h18.7l-1.4,3.7h-17.3v36.4c0,5.9,2.7,9,7.9,9,4,0,8-2.4,11-5.2l.6,.4Z"></path>
                                    <path class="cls-1"
                                          d="M399.4,78.21v-.6c4.1,0,4.4-3.4,4.4-9.8v-29c0-6.4-1.7-8.5-5.1-9.4v-.6l12.8-4h.4v43c0,6.4,.3,9.8,4.4,9.8v.6h-16.9Zm1.7-67.5c0-3.1,2.5-5.6,5.7-5.6s5.6,2.5,5.6,5.6-2.5,5.6-5.6,5.6-5.7-2.5-5.7-5.6Z"></path>
                                    <path class="cls-1"
                                          d="M421.93,52.2c0-16.6,10.4-27.6,24.4-27.6s24.1,10.4,24.1,27.2-10.4,27.6-24.3,27.6-24.2-10.4-24.2-27.2Zm39.7-.2c0-14.5-5.4-26-15.5-26s-15.4,10.9-15.4,26,5.5,26,15.6,26,15.3-10.9,15.3-26Z"></path>
                                    <path class="cls-1"
                                          d="M519.84,67.8c0,6.4,.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-25.4c0-7.6-2.4-12.4-9.4-12.4-4.4,0-9.2,2.2-13.5,5.6v32.2c0,6.4,.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-29c0-6.4-1.7-8.5-5.1-9.4v-.6l12.8-4h.4v9.8c5.3-5.5,11.6-10,18.3-10,7.8,0,12.7,5.5,12.7,15.6v27.6Z"></path>
                                </g>
                            </g>
                        </svg>
                    </h3>
                    <div style="margin: 6% 0">
                        <p>
                            少年主人公轉入位於港區港灣人工島的月光館學園高中部就讀，<br/>
                            在某次遭到怪物襲擊的契機之下，意外的使潛藏的心靈力量「人格面具」覺醒。<br/>
                        </p>

                        <p style="margin-top: 5%">
                            他加入了特別課外活動部」（S.E.E.S.），<br/>
                            和夥伴們一同討伐「影時間」中出現的神祕怪物「陰影」，持續不懈地戰鬥。<br/>
                        </p>

                        <p style="margin-top: 5%">究竟最後等待著他的會是什麼樣的命運……</p>

                    </div>
                </div>
                <div class="introduction-img story-img">
                </div>
            </div>
            <!--feature-->
            <div class="feature flex jc-start">
                <div class="feature-img story-img">
                </div>
                <div class="text" style="flex: 0.3">
                    <h3 class="title">
                        <svg data-name="レイヤー 1" id="_レイヤー_1" viewBox="0 0 353.21 74" xmlns="http://www.w3.org/2000/svg">
                            <g id="Features-title">
                                <g>
                                    <path class="cls-1"
                                          d="M47.6,0l1.2,15h-.6C43.1,3.6,39.8,1.6,29,1.6h-13V36.1h11.2c9,0,11-2.4,12.7-9.8h.6v21.9h-.6c-1.7-7.1-3.7-10.5-12.7-10.5h-11.2v22.6c0,7.4,.4,11.9,7.2,11.9v.6H0v-.6c6.8,0,7.2-4.5,7.2-11.9V12.5C7.2,5.1,6.8,.6,0,.6V0H47.6Z"></path>
                                    <path class="cls-1"
                                          d="M93,60.9c-3.5,6-9.6,13.1-20.2,13.1-13.3,0-21.4-11.7-21.4-26.6,0-16.5,10.7-28.2,23.6-28.2,10.5,0,18.5,7.4,17.9,20H60.2c-.2,1.5-.3,3-.3,4.5,0,14.2,5.6,25.4,16.8,25.4,6.9,0,12.5-4,15.7-8.6l.6,.4Zm-32.6-23.3h23.9c.8-10.3-2.2-17-9.8-17s-12.6,7.7-14.1,17Z"></path>
                                    <path class="cls-1"
                                          d="M142.61,67.3c-1.6,3-4.9,6.7-9.4,6.7-5,0-6.1-4.9-6.3-8.5-4.1,5.1-10.1,8.5-15.8,8.5-6.8,0-11.6-4.3-11.6-10.5,0-7.2,5.5-12.1,17.6-15.6l9.5-2.7v-7.7c0-2.9,0-13.8-10.1-13.8-6.7,0-11.6,4.7-14.7,10.7l-.6-.3c1.6-5.5,7.4-14.9,19-14.9,9.7,0,14.4,6.7,14.4,16.1v26.4c0,4.1,.2,7.5,3.3,7.5,2.1,0,3.5-1.5,4.1-2.3l.6,.4Zm-16-2.8v-17.8l-7.1,2.3c-9.2,3-11.9,6.1-11.9,11.9,0,5.3,3.4,8.6,8.1,8.6,4,0,8.2-2.6,10.9-5Z"></path>
                                    <path class="cls-1"
                                          d="M177.89,64.7c-4.7,5.9-10.7,9.3-15.9,9.3-7.4,0-11.7-4.1-11.7-12.6V24.1h-5.2v-1.1l1.4-.6c4.9-2.1,8.4-6.1,11.3-15.1h.6v13.1h18.7l-1.4,3.7h-17.3V60.5c0,5.9,2.7,9,7.9,9,4,0,8-2.4,11-5.2l.6,.4Z"></path>
                                    <path class="cls-1"
                                          d="M226.68,60.5c0,6.4,1.6,8.8,5.1,9.8v.6l-11.1,3.1h-.4l-1.7-10c-5.3,5.5-11.6,10-18.3,10-7.8,0-12.7-5.5-12.7-15.6V30.5c0-6.4-1.9-8.2-5.3-9.1v-.6l13-1.4h.4V56.2c0,7.6,2.4,12.4,9.4,12.4,4.4,0,9.2-2.2,13.5-5.5V30.5c0-6.4-1.9-8.2-5.3-9.1v-.6l13-1.4h.4V60.5Z"></path>
                                    <path class="cls-1"
                                          d="M268.47,20l-2,8.6h-.6c-2.2-1.5-4.8-2.4-6.9-2.4-2.7,0-5.3,1.5-8,5.3v30.9c0,6.4,.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-29c0-6.4-1.7-8.5-5.1-9.4v-.6l12.8-4h.4v10.7c4.1-6.3,8.5-10.9,13.6-10.9,1.2,0,2.5,.2,3.9,.8Z"></path>
                                    <path class="cls-1"
                                          d="M312.8,60.9c-3.5,6-9.6,13.1-20.2,13.1-13.3,0-21.4-11.7-21.4-26.6,0-16.5,10.7-28.2,23.6-28.2,10.5,0,18.5,7.4,17.9,20h-32.7c-.2,1.5-.3,3-.3,4.5,0,14.2,5.6,25.4,16.8,25.4,6.9,0,12.5-4,15.7-8.6l.6,.4Zm-32.6-23.3h23.9c.8-10.3-2.2-17-9.8-17s-12.6,7.7-14.1,17Z"></path>
                                    <path class="cls-1"
                                          d="M320.41,70.8l-.8-12.4h.6c3.7,8.9,8.3,14.2,16,14.2,5.9,0,11.4-3.1,11.4-9.9,0-6-4.2-8.2-11.9-12.4l-3.8-2c-5.3-2.9-10.9-6.3-10.9-14.5,0-9.1,7-14.6,16.5-14.6,4,0,9.5,.9,13.3,3v10.2h-.6c-2.5-7.4-7.6-11.8-13.7-11.8s-9.9,3.7-9.9,9.1c0,5.7,4.4,8.5,9.3,11l3.7,2c7.2,3.8,13.6,6.9,13.6,15.8,0,9.4-7.5,15.5-18.3,15.5-5.2,0-10.9-1.3-14.5-3.2Z"></path>
                                </g>
                            </g>
                        </svg>
                    </h3>
                    <div style="margin: 6% 0">


                        <p style="margin-top: 5%">
                            提升了遊戲操作性，包含使用者介面在內，遊戲整體變得對玩家更加友善等等，在許多細節上進行了更易於遊玩的調整。

                        </p>

                        <p style="margin-top: 5%">藉由最新的遊戲機種，將「那份感動」更加鮮明地重新喚起！</p>

                    </div>
                    <img class="more-btn" src="img/more_btn.webp">
                </div>
            </div>
            <!--Game System-->
            <div class="game-system flex jc-end">
                <div class="text" style="flex: 0.3">
                    <h3 class="title">
                        <svg data-name="レイヤー 1" id="GameSystem_text" viewBox="0 0 541.47 97.41"
                             xmlns="http://www.w3.org/2000/svg">
                            <g id="GameSystem_text">
                                <g>
                                    <path class="cls-1"
                                          d="m0,37.8C0,15.4,14.1,0,33.5,0c11,0,18.2,2.8,23,5.4v11.7h-.6C50.6,6.2,44.4,1.4,33.4,1.4c-14,0-23.6,15.4-23.6,36.3s9.1,36.1,23.8,36.1c8.6,0,15.4-3.6,15.4-9.4v-11c0-7.4-.6-11.1-6.4-11.5v-.6h18.4v.6c-3,.4-3.2,4.1-3.2,11.5v14.6c-5.6,3.8-14.3,7.2-24.5,7.2C13.1,75.21,0,59.7,0,37.8Z"></path>
                                    <path class="cls-1"
                                          d="m107.15,68.5c-1.6,3-4.9,6.7-9.4,6.7-5,0-6.1-4.9-6.3-8.5-4.1,5.1-10.1,8.5-15.8,8.5-6.8,0-11.6-4.3-11.6-10.5,0-7.2,5.5-12.1,17.6-15.6l9.5-2.7v-7.7c0-2.9,0-13.8-10.1-13.8-6.7,0-11.6,4.7-14.7,10.7l-.6-.3c1.6-5.5,7.4-14.9,19-14.9,9.7,0,14.4,6.7,14.4,16.1v26.4c0,4.1.2,7.5,3.3,7.5,2.1,0,3.5-1.5,4.1-2.3l.6.4Zm-16-2.8v-17.8l-7.1,2.3c-9.2,3-11.9,6.1-11.9,11.9,0,5.3,3.4,8.6,8.1,8.6,4,0,8.2-2.6,10.9-5Z"></path>
                                    <path class="cls-1"
                                          d="m181.9,63.6c0,6.4.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-25.4c0-7.6-2.4-12.3-9.4-12.3-4.4,0-9,2.1-12.8,5.6.3,1.4.4,2.9.4,4.5v27.6c0,6.4.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-25.4c0-7.6-2.4-12.3-9.3-12.3-4.4,0-8.8,2.1-12.5,5.4v32.3c0,6.4.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-29c0-6.4-1.7-8.5-5.1-9.4v-.6l12.8-4h.4v9.6c4.8-5.4,10.6-9.8,17.2-9.8s10.7,3.6,12.2,10.2c4.8-5.6,11-10.2,17.7-10.2,7.8,0,12.7,5.5,12.7,15.6v27.6Z"></path>
                                    <path class="cls-1"
                                          d="m231.57,62.1c-3.5,6-9.6,13.1-20.2,13.1-13.3,0-21.4-11.7-21.4-26.6,0-16.5,10.7-28.2,23.6-28.2,10.5,0,18.5,7.4,17.9,20h-32.7c-.2,1.5-.3,3-.3,4.5,0,14.2,5.6,25.4,16.8,25.4,6.9,0,12.5-4,15.7-8.6l.6.4Zm-32.6-23.3h23.9c.8-10.3-2.2-17-9.8-17s-12.6,7.7-14.1,17Z"></path>
                                    <path class="cls-1"
                                          d="m261.27,70.8l-.6-15.3h.6c4,12.3,11.2,18.3,20,18.3,8.1,0,15.7-5.5,15.7-15.1s-7.2-13.2-15.8-17.5l-5-2.5c-7.1-3.5-14-8.1-14-18.8,0-11.4,8.4-19.9,20.3-19.9,5.5,0,12.9,1.8,17.7,4.3v11.9h-.6c-3.9-10.4-10.1-14.8-17.5-14.8-8.4,0-14,5.7-14,14.1s6.6,12,12.5,15l5,2.5c8.8,4.4,17.3,9.1,17.3,21.1s-9.2,21.1-22.8,21.1c-5.8,0-14.2-1.8-18.8-4.4Z"></path>
                                    <path class="cls-1"
                                          d="m334.4,21.6h13.9v.6c-3.5.6-5.6,4.5-9.8,15.6l-17,44.6c-4,10.4-9.3,15-15.4,15-1.8,0-3.3-.2-4.9-.7l.8-7.2h.6c6,5.2,13.1,3.6,16.8-6.4l3.7-9.8-15-39.8c-2.9-7.7-4.5-10.7-7.9-11.3v-.6h18.3v.6c-4.5.4-4.6,3.6-2.8,8.6l11.6,31.4,9.5-25c4-10.5,2.4-14.5-2.4-15v-.6Z"></path>
                                    <path class="cls-1"
                                          d="m349.2,72l-.8-12.4h.6c3.7,8.9,8.3,14.2,16,14.2,5.9,0,11.4-3.1,11.4-9.9,0-6-4.2-8.2-11.9-12.4l-3.8-2c-5.3-2.9-10.9-6.3-10.9-14.5,0-9.1,7-14.6,16.5-14.6,4,0,9.5.9,13.3,3v10.2h-.6c-2.5-7.4-7.6-11.8-13.7-11.8s-9.9,3.7-9.9,9.1c0,5.7,4.4,8.5,9.3,11l3.7,2c7.2,3.8,13.6,6.9,13.6,15.8,0,9.4-7.5,15.5-18.3,15.5-5.2,0-10.9-1.3-14.5-3.2Z"></path>
                                    <path class="cls-1"
                                          d="m418.07,65.9c-4.7,5.9-10.7,9.3-15.9,9.3-7.4,0-11.7-4.1-11.7-12.6V25.3h-5.2v-1.1l1.4-.6c4.9-2.1,8.4-6.1,11.3-15.1h.6v13.1h18.7l-1.4,3.7h-17.3v36.4c0,5.9,2.7,9,7.9,9,4,0,8-2.4,11-5.2l.6.4Z"></path>
                                    <path class="cls-1"
                                          d="m461.26,62.1c-3.5,6-9.6,13.1-20.2,13.1-13.3,0-21.4-11.7-21.4-26.6,0-16.5,10.7-28.2,23.6-28.2,10.5,0,18.5,7.4,17.9,20h-32.7c-.2,1.5-.3,3-.3,4.5,0,14.2,5.6,25.4,16.8,25.4,6.9,0,12.5-4,15.7-8.6l.6.4Zm-32.6-23.3h23.9c.8-10.3-2.2-17-9.8-17s-12.6,7.7-14.1,17Z"></path>
                                    <path class="cls-1"
                                          d="m537.07,63.6c0,6.4.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-25.4c0-7.6-2.4-12.3-9.4-12.3-4.4,0-9,2.1-12.8,5.6.3,1.4.4,2.9.4,4.5v27.6c0,6.4.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-25.4c0-7.6-2.4-12.3-9.3-12.3-4.4,0-8.8,2.1-12.5,5.4v32.3c0,6.4.3,9.8,4.4,9.8v.6h-16.9v-.6c4.1,0,4.4-3.4,4.4-9.8v-29c0-6.4-1.7-8.5-5.1-9.4v-.6l12.8-4h.4v9.6c4.8-5.4,10.6-9.8,17.2-9.8s10.7,3.6,12.2,10.2c4.8-5.6,11-10.2,17.7-10.2,7.8,0,12.7,5.5,12.7,15.6v27.6Z"></path>
                                </g>
                            </g>
                        </svg>
                    </h3>
                    <div style="margin: 6% 0">
                        <p>將原作的優點保留下來，讓《女神異聞錄３》的遊戲體驗更加舒適。</p>
                        <p style="margin-top: 5%">
                            戰鬥系統變得更加爽快，藉由全新圖像表現與機關設計等等，<br>
                            讓塔耳塔羅斯變得更加易於探索。宿舍生活與社群也有所進化！<br></p>
                    </div>
                    <img class="more-btn" src="img/game_system_btn.webp">
                </div>
                <div class="game-system-img story-img">
                </div>
            </div>
            <!--滚动线-->
            <div class="dark-hour flex flexD-col jc-c ai-c">


                <div class="shutiao"></div>
                <p class="font-small">Dark Hour</p>
                <p class="font-small" style="margin: 1% 0">While I breathe, I hope</p>
                <p class="font-small">Rise again</p>
            </div>
            <!--RELOAD-->
            <div style="margin: 0">

                <svg class="active" data-name="レイヤー 1" id="RELOAD" viewBox="0 0 1913.8 376.9"

                     xmlns="http://www.w3.org/2000/svg">
                    <g id="reload_text">
                        <g>
                            <path class="cls-1 svg-elem-1"
                                  d="M255.7,374.9v3.1c-6.6,1-28,2-41.8,2c-33.6,0-42.8-18.3-105.9-153.3c-9.7-19.4-20.4-22.9-36.7-22.9H44.8v110.5c0,37.7,1.5,60.6,36.2,60.6v3.1H-36.7v-3.1C-2,374.9,0,351.9,0,314.3V70.8c0-37.7-2-60.6-36.7-60.6V7.1H89.6c78.4,0,123.8,38.7,123.8,97.8c0,50.4-38.7,81.5-83,93.7v1c14.8,9.2,27,30.6,38.2,52.5C218,347.4,228.7,365.7,255.7,374.9L255.7,374.9z M44.8,195.6H83c55.5,0,83-32.1,83-87.6c0-53.5-25.5-92.7-82.5-92.7H64.2c-12.2,0-19.4,6.1-19.4,18.3C44.8,33.6,44.8,195.6,44.8,195.6z"></path>
                            <path class="cls-1 svg-elem-2"
                                  d="M562.9,292.4l-11.7,85.6H294.5v-3.1c34.6,0,36.7-22.9,36.7-60.6V70.8c0-37.7-2-60.6-36.7-60.6V7.1h249.1l6.6,76.4h-3.1c-26-58.1-42.8-68.3-98.3-68.3H376v165.5h57c45.8,0,56-12.2,64.7-49.9h3.1v111.5h-3.1C489,206.3,478.8,189,433,189h-57v156.9c0,15.3,4.6,23.9,20.4,23.9h60.1c54,0,73.3-9.2,103.4-77.4L562.9,292.4L562.9,292.4z"></path>
                            <path class="cls-1 svg-elem-3"
                                  d="M603.1,377.9v-3.1c34.6,0,36.7-22.9,36.7-60.6V70.8c0-37.7-2-60.6-36.7-60.6V7.1h118.2v3.1c-34.6,0-36.7,22.9-36.7,60.6v275.1c0,15.8,4.6,23.9,19.9,23.9h35.7c55,0,75.9-12.2,107.5-82h3.1l-12.7,90.2L603.1,377.9L603.1,377.9z"></path>
                            <path class="cls-1 svg-elem-4"
                                  d="M890.4,193.5C890.4,79.4,957.2,1,1056,1c99.8,0,165,74.4,165,190.5c0,114.1-67.2,192.5-166,192.5C955.1,384,890.4,309.7,890.4,193.5L890.4,193.5z M1170.6,192.5c0-102.9-41.3-184.4-115.6-184.4S940.4,86.6,940.4,192.5c0,102.9,41.8,184.4,115.6,184.4C1130.4,376.9,1170.6,298.5,1170.6,192.5L1170.6,192.5z"></path>
                            <path class="cls-1 svg-elem-5"
                                  d="M1495.2,312.7c15.3,42.8,25,60.1,46.4,62.1v3.1h-116.1v-3.1c28.5-2,37.7-18.8,27-49.9l-27-76.9h-120.2l-12.2,34.6c-20.9,60.1-21.4,89.1,15.3,92.2v3.1h-84v-3.1c24.4-2.5,37.7-33.6,59.1-95.2L1381.7,2h4.1L1495.2,312.7z M1309.3,235.8h112.1l-56-160.4L1309.3,235.8L1309.3,235.8z"></path>
                            <path class="cls-1 svg-elem-6"
                                  d="M1582.2,377.9v-3.1c34.6,0,36.7-22.9,36.7-60.6V70.8c0-37.7-2-60.6-36.7-60.6V7.1h147.7c116.1,0,182.9,66.2,182.9,180.8c0,117.2-73.9,190-185.9,190L1582.2,377.9L1582.2,377.9z M1862.3,191c0-102.4-43.3-175.7-136-175.7H1683c-12.2,0-19.4,6.1-19.4,18.3v303.6c0,23.4,13.2,32.6,65.2,32.6C1820.1,369.8,1862.3,300.5,1862.3,191L1862.3,191z"></path>
                        </g>
                    </g>
                </svg>
            </div>

        </section>
        <!--横向人物-->
        <section class="character flex">
            <ul class="character-container">
                <li>
                    <div class="text">
                        <svg data-name="レイヤー 2" id="_レイヤー_2" viewBox="0 0 747.37 211.14"
                             xmlns="http://www.w3.org/2000/svg">
                            <g id="SEES_text">
                                <g>
                                    <path class="cls-1"
                                          d="m1.68,198.79l-1.68-42.96h1.68c11.23,34.54,31.45,51.38,56.16,51.38,22.74,0,44.08-15.44,44.08-42.4s-20.22-37.06-44.36-49.14l-14.04-7.02C23.58,98.83,4.21,85.92,4.21,55.88,4.21,23.87,27.8,0,61.21,0c15.44,0,36.22,5.05,49.7,12.07v33.41h-1.68C98.27,16.29,80.86,3.93,60.09,3.93c-23.59,0-39.31,16-39.31,39.59s18.53,33.69,35.1,42.12l14.04,7.02c24.71,12.35,48.57,25.55,48.57,59.24s-25.83,59.24-64.02,59.24c-16.29,0-39.87-5.05-52.79-12.35Z"></path>
                                    <path class="cls-1"
                                          d="m129.69,195.14c0-8.99,7.3-16.29,16.29-16.29s16,7.3,16,16.29-7.3,16-16,16-16.29-7.3-16.29-16Z"></path>
                                    <path class="cls-1"
                                          d="m318.62,160.6l-6.46,47.17h-141.51v-1.68c19.09,0,20.22-12.63,20.22-33.41V38.47c0-20.78-1.12-33.41-20.22-33.41v-1.68h137.3l3.65,42.12h-1.68c-14.32-32.01-23.59-37.62-54.19-37.62h-40.15v91.25h31.45c25.27,0,30.89-6.74,35.66-27.52h1.68v61.49h-1.68c-4.77-19.94-10.39-29.48-35.66-29.48h-31.45v86.48c0,8.42,2.53,13.2,11.23,13.2h33.13c29.76,0,40.43-5.05,57-42.68h1.68Z"></path>
                                    <path class="cls-1"
                                          d="m333,195.14c0-8.99,7.3-16.29,16.29-16.29s16,7.3,16,16.29-7.3,16-16,16-16.29-7.3-16.29-16Z"></path>
                                    <path class="cls-1"
                                          d="m521.93,160.6l-6.46,47.17h-141.51v-1.68c19.09,0,20.22-12.63,20.22-33.41V38.47c0-20.78-1.12-33.41-20.22-33.41v-1.68h137.3l3.65,42.12h-1.68c-14.32-32.01-23.59-37.62-54.19-37.62h-40.15v91.25h31.45c25.27,0,30.89-6.74,35.66-27.52h1.68v61.49h-1.68c-4.77-19.94-10.39-29.48-35.66-29.48h-31.45v86.48c0,8.42,2.53,13.2,11.23,13.2h33.13c29.76,0,40.43-5.05,57-42.68h1.68Z"></path>
                                    <path class="cls-1"
                                          d="m536.31,195.14c0-8.99,7.3-16.29,16.29-16.29s16,7.3,16,16.29-7.3,16-16,16-16.29-7.3-16.29-16Z"></path>
                                    <path class="cls-1"
                                          d="m587.07,198.79l-1.68-42.96h1.68c11.23,34.54,31.45,51.38,56.16,51.38,22.74,0,44.08-15.44,44.08-42.4s-20.22-37.06-44.36-49.14l-14.04-7.02c-19.94-9.83-39.31-22.74-39.31-52.79,0-32.01,23.59-55.88,57-55.88,15.44,0,36.22,5.05,49.7,12.07v33.41h-1.68c-10.95-29.2-28.36-41.55-49.14-41.55-23.59,0-39.31,16-39.31,39.59s18.53,33.69,35.1,42.12l14.04,7.02c24.71,12.35,48.57,25.55,48.57,59.24s-25.83,59.24-64.02,59.24c-16.29,0-39.87-5.05-52.79-12.35Z"></path>
                                    <path class="cls-1"
                                          d="m715.08,195.14c0-8.99,7.3-16.29,16.29-16.29s16,7.3,16,16.29-7.3,16-16,16-16.29-7.3-16.29-16Z"></path>
                                </g>
                            </g>
                        </svg>
                        <div class="chara-text">
                            <p>An aggregation vigilantly chosen to</p>

                            <p> vanquish the Shadows, will face Destiny. </p>

                            <p> Time won't wait for you, destiny won't change for you.</p>

                        </div>
                    </div>
                    <ul class="imgs">
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character1_off.webp">
                                <img alt="" class="img_on" src="./img/character/character1.webp">
                            </div>
                            <p>protagonist</p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character2_off.webp">
                                <img alt="" class="img_on" src="./img/character/character2.webp">
                            </div>
                            <p>Yukari
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character3_off.webp">
                                <img alt="" class="img_on" src="./img/character/character3.webp">
                            </div>
                            <p>Junpei
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character4_off.webp">
                                <img alt="" class="img_on" src="./img/character/character4.webp">
                            </div>
                            <p>Akihiko
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character5_off.webp">
                                <img alt="" class="img_on" src="./img/character/character5.webp">
                            </div>
                            <p>Mitsuru
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character6_off.webp">
                                <img alt="" class="img_on" src="./img/character/character6.webp">
                            </div>
                            <p>Fuuka
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character7_off.webp">
                                <img alt="" class="img_on" src="./img/character/character7.webp">
                            </div>
                            <p>Koromaru
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character8_off.webp">
                                <img alt="" class="img_on" src="./img/character/character8.webp">
                            </div>
                            <p>Aigis
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character9_off.webp">
                                <img alt="" class="img_on" src="./img/character/character9.webp">
                            </div>
                            <p>Ken
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character10_off.webp">
                                <img alt="" class="img_on" src="./img/character/character10.webp">
                            </div>
                            <p>Shinjiro
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                    </ul>

                </li>
                <li>
                    <div class="text double">
                        <svg data-name="レイヤー 2" id="_レイヤー_2" style="width: 70%" viewBox="0 0 747.37 211.14"
                             xmlns="http://www.w3.org/2000/svg">
                            <g id="SEES_text">
                                <g>
                                    <path class="cls-1"
                                          d="m1.68,198.79l-1.68-42.96h1.68c11.23,34.54,31.45,51.38,56.16,51.38,22.74,0,44.08-15.44,44.08-42.4s-20.22-37.06-44.36-49.14l-14.04-7.02C23.58,98.83,4.21,85.92,4.21,55.88,4.21,23.87,27.8,0,61.21,0c15.44,0,36.22,5.05,49.7,12.07v33.41h-1.68C98.27,16.29,80.86,3.93,60.09,3.93c-23.59,0-39.31,16-39.31,39.59s18.53,33.69,35.1,42.12l14.04,7.02c24.71,12.35,48.57,25.55,48.57,59.24s-25.83,59.24-64.02,59.24c-16.29,0-39.87-5.05-52.79-12.35Z"></path>
                                    <path class="cls-1"
                                          d="m129.69,195.14c0-8.99,7.3-16.29,16.29-16.29s16,7.3,16,16.29-7.3,16-16,16-16.29-7.3-16.29-16Z"></path>
                                    <path class="cls-1"
                                          d="m318.62,160.6l-6.46,47.17h-141.51v-1.68c19.09,0,20.22-12.63,20.22-33.41V38.47c0-20.78-1.12-33.41-20.22-33.41v-1.68h137.3l3.65,42.12h-1.68c-14.32-32.01-23.59-37.62-54.19-37.62h-40.15v91.25h31.45c25.27,0,30.89-6.74,35.66-27.52h1.68v61.49h-1.68c-4.77-19.94-10.39-29.48-35.66-29.48h-31.45v86.48c0,8.42,2.53,13.2,11.23,13.2h33.13c29.76,0,40.43-5.05,57-42.68h1.68Z"></path>
                                    <path class="cls-1"
                                          d="m333,195.14c0-8.99,7.3-16.29,16.29-16.29s16,7.3,16,16.29-7.3,16-16,16-16.29-7.3-16.29-16Z"></path>
                                    <path class="cls-1"
                                          d="m521.93,160.6l-6.46,47.17h-141.51v-1.68c19.09,0,20.22-12.63,20.22-33.41V38.47c0-20.78-1.12-33.41-20.22-33.41v-1.68h137.3l3.65,42.12h-1.68c-14.32-32.01-23.59-37.62-54.19-37.62h-40.15v91.25h31.45c25.27,0,30.89-6.74,35.66-27.52h1.68v61.49h-1.68c-4.77-19.94-10.39-29.48-35.66-29.48h-31.45v86.48c0,8.42,2.53,13.2,11.23,13.2h33.13c29.76,0,40.43-5.05,57-42.68h1.68Z"></path>
                                    <path class="cls-1"
                                          d="m536.31,195.14c0-8.99,7.3-16.29,16.29-16.29s16,7.3,16,16.29-7.3,16-16,16-16.29-7.3-16.29-16Z"></path>
                                    <path class="cls-1"
                                          d="m587.07,198.79l-1.68-42.96h1.68c11.23,34.54,31.45,51.38,56.16,51.38,22.74,0,44.08-15.44,44.08-42.4s-20.22-37.06-44.36-49.14l-14.04-7.02c-19.94-9.83-39.31-22.74-39.31-52.79,0-32.01,23.59-55.88,57-55.88,15.44,0,36.22,5.05,49.7,12.07v33.41h-1.68c-10.95-29.2-28.36-41.55-49.14-41.55-23.59,0-39.31,16-39.31,39.59s18.53,33.69,35.1,42.12l14.04,7.02c24.71,12.35,48.57,25.55,48.57,59.24s-25.83,59.24-64.02,59.24c-16.29,0-39.87-5.05-52.79-12.35Z"></path>
                                    <path class="cls-1"
                                          d="m715.08,195.14c0-8.99,7.3-16.29,16.29-16.29s16,7.3,16,16.29-7.3,16-16,16-16.29-7.3-16.29-16Z"></path>
                                </g>
                            </g>
                        </svg>
                        <div class="chara-text">
                            <p>An aggregation vigilantly chosen to</p>

                            <p> vanquish the Shadows, will face Destiny. </p>

                            <p> Time won't wait for you, destiny won't change for you.</p>

                        </div>
                    </div>
                    <ul class="imgs">
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character11_off.webp">
                                <img alt="" class="img_on" src="./img/character/character11.webp">
                            </div>
                            <p>Takaya
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character12_off.webp">
                                <img alt="" class="img_on" src="./img/character/character12.webp">
                            </div>
                            <p>Jin
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                        <li>
                            <div>
                                <img alt="" class="img_off" src="./img/character/character13_off.webp">
                                <img alt="" class="img_on" src="./img/character/character13.webp">
                            </div>
                            <p>Chidori
                                <svg class="" fill="none" height="20" viewBox="0 0 48 48"
                                     width="26" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fv_rightArrowhead" d="M41.9999 24H5.99994" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                    <path class="fv_rightArrowhead" d="M30 12L42 24L30 36" stroke="#333"
                                          stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
                                          style="stroke: rgb(51, 51, 51);"></path>
                                </svg>
                            </p>
                        </li>
                    </ul>

                </li>

            </ul>
        </section>
        <!--尾部商标-->
        <footer class="footer">
            <div class="top flex">
                <div class="LOGO">
                    <img alt="" class="img-logo" src="./img/logos/logo_color_.webp">
                </div>
                <div class="SPEC">
                    <p class="title">SPEC</p>
                    <ul>
                        <li><span>Title</span><span>Persona 3 Reload</span></li>
                        <li><span>Release</span><span>Available now</span></li>
                        <li><span>Genre</span><span>RPG</span></li>
                        <li><span>Number of Players</span><span>1</span></li>
                        <li><span>Platforms</span><span>Xbox Game Pass / Xbox Series X|S / Xbox One / Windows / PlayStation®5 /PlayStation®4 / Steam
</span></li>
                    </ul>
                </div>
                <div class="LINKS">
                    <p class="title">LINKS</p>
                    <a>Official Twitter</a>
                    <a>Official YouTube</a>
                </div>
                <div class="SHARE">
                    <p class="title">SHARE</p>
                    <div>
                        <img alt="" src="./img/logos/sns_twitter.webp" style="margin-right: 1rem">
                        <img alt="" src="./img/logos/sns_facebook.webp">
                    </div>
                </div>
            </div>

            <!--“”、“PlayStation”、“”and“”are trademarks and/or registered trademarks of Sony Interactive Entertainment Inc.-->

            <!--©2023 Valve Corporation. Steam and the Steam logo are trademarks and/or registered trademarks of Valve-->
            <!--Corporation in the U.S. and/or other countries.-->

            <!--Licensing©ATLUS ©SEGA All rights reserved.-->
        </footer>
        <!-- 导航栏蒙版 -->
        <div class="feature-modals">
            <a class="shutDown" id="shutModals">X</a>
            <svg height="124.74" id="modal-wave" viewBox="0 0 1920 124.74" width="1920"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M1920,9.537s-247.678,53.14-530.6,53.14C1019.47,62.678,1019.47.888,649.537.888,312.453.888,282.509,52.187,0,61.3v64.326H1920v0"
                      data-name="wave_path"
                      fill="#ffffff"
                      id="wave_path" transform="translate(0 -0.888)"/>
            </svg>
            <div class="modal-nav">
                <a class="select" href="javascript:">GRAPHICS</a>
                <a href="javascript:">SYSTEM</a>
                <a href="javascript:">STORY</a>
                <a href="javascript:">ANIMATION</a>
            </div>
            <div class="contents-container">

                <div class="modal-contents">
                    <div class="top">
                        <div class="top-left">
                            <h4>FEATURE #1</h4>
                            <svg class="top_title" data-name="レイヤー 2" id="_レイヤー_2" viewBox="0 0 264.21 116.88"
                                 xmlns="http://www.w3.org/2000/svg">
                                <g id="Story_text">
                                    <g>
                                        <path class="cls-1"
                                              d="M.72,84.96l-.72-18.36H.72c4.8,14.76,13.44,21.96,24,21.96,9.72,0,18.84-6.6,18.84-18.12s-8.64-15.84-18.96-21l-6-3C10.08,42.24,1.8,36.72,1.8,23.88,1.8,10.2,11.88,0,26.16,0c6.6,0,15.48,2.16,21.24,5.16v14.28h-.72C42,6.96,34.56,1.68,25.68,1.68,15.6,1.68,8.88,8.52,8.88,18.6s7.92,14.4,15,18l6,3c10.56,5.28,20.76,10.92,20.76,25.32s-11.04,25.32-27.36,25.32c-6.96,0-17.04-2.16-22.56-5.28Z"></path>
                                        <path class="cls-1"
                                              d="M95.31,79.08c-5.64,7.08-12.84,11.16-19.08,11.16-8.88,0-14.04-4.92-14.04-15.12V30.36h-6.24v-1.32l1.68-.72c5.88-2.52,10.08-7.32,13.56-18.12h.72v15.72h22.44l-1.68,4.44h-20.76v43.68c0,7.08,3.24,10.8,9.48,10.8,4.8,0,9.6-2.88,13.2-6.24l.72,.48Z"></path>
                                        <path class="cls-1"
                                              d="M99.29,57.6c0-19.92,12.48-33.12,29.28-33.12s28.92,12.48,28.92,32.64-12.48,33.12-29.16,33.12-29.04-12.48-29.04-32.64Zm47.64-.24c0-17.4-6.48-31.2-18.6-31.2s-18.48,13.08-18.48,31.2,6.6,31.2,18.72,31.2,18.36-13.08,18.36-31.2Z"></path>
                                        <path class="cls-1"
                                              d="M200.58,25.44l-2.4,10.32h-.72c-2.64-1.8-5.76-2.88-8.28-2.88-3.24,0-6.36,1.8-9.6,6.36v37.08c0,7.68,.36,11.76,5.28,11.76v.72h-20.28v-.72c4.92,0,5.28-4.08,5.28-11.76V41.52c0-7.68-2.04-10.2-6.12-11.28v-.72l15.36-4.8h.48v12.84c4.92-7.56,10.2-13.08,16.32-13.08,1.44,0,3,.24,4.68,.96Z"></path>
                                        <path class="cls-1"
                                              d="M247.53,25.92h16.68v.72c-4.2,.72-6.72,5.4-11.76,18.72l-20.4,53.52c-4.8,12.48-11.16,18-18.48,18-2.16,0-3.96-.24-5.88-.84l.96-8.64h.72c7.2,6.24,15.72,4.32,20.16-7.68l4.44-11.76-18-47.76c-3.48-9.24-5.4-12.84-9.48-13.56v-.72h21.96v.72c-5.4,.48-5.52,4.32-3.36,10.32l13.92,37.68,11.4-30c4.8-12.6,2.88-17.4-2.88-18v-.72Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="top-right">
                            <p>我爱着雪菜</p>
                            <p>我无法对和纱说谎</p>
                        </div>
                    </div>
                    <div class="modal-img">
                        <div>
                            <img alt="" class="modal-img img" src="./img/大脑过载.jpg" srcset="">
                        </div>
                        <div>
                            <img alt="" class="modal-img img" src="./img/小狐狸.jpg" srcset="">
                        </div>

                    </div>
                </div>
                <div class="modal-contents">
                    <div class="top">
                        <div class="top-left">
                            <h4>FEATURE #1</h4>
                            <svg class="top_title" data-name="レイヤー 2" id="_レイヤー_2" viewBox="0 0 264.21 116.88"
                                 xmlns="http://www.w3.org/2000/svg">
                                <g id="Story_text">
                                    <g>
                                        <path class="cls-1"
                                              d="M.72,84.96l-.72-18.36H.72c4.8,14.76,13.44,21.96,24,21.96,9.72,0,18.84-6.6,18.84-18.12s-8.64-15.84-18.96-21l-6-3C10.08,42.24,1.8,36.72,1.8,23.88,1.8,10.2,11.88,0,26.16,0c6.6,0,15.48,2.16,21.24,5.16v14.28h-.72C42,6.96,34.56,1.68,25.68,1.68,15.6,1.68,8.88,8.52,8.88,18.6s7.92,14.4,15,18l6,3c10.56,5.28,20.76,10.92,20.76,25.32s-11.04,25.32-27.36,25.32c-6.96,0-17.04-2.16-22.56-5.28Z"></path>
                                        <path class="cls-1"
                                              d="M95.31,79.08c-5.64,7.08-12.84,11.16-19.08,11.16-8.88,0-14.04-4.92-14.04-15.12V30.36h-6.24v-1.32l1.68-.72c5.88-2.52,10.08-7.32,13.56-18.12h.72v15.72h22.44l-1.68,4.44h-20.76v43.68c0,7.08,3.24,10.8,9.48,10.8,4.8,0,9.6-2.88,13.2-6.24l.72,.48Z"></path>
                                        <path class="cls-1"
                                              d="M99.29,57.6c0-19.92,12.48-33.12,29.28-33.12s28.92,12.48,28.92,32.64-12.48,33.12-29.16,33.12-29.04-12.48-29.04-32.64Zm47.64-.24c0-17.4-6.48-31.2-18.6-31.2s-18.48,13.08-18.48,31.2,6.6,31.2,18.72,31.2,18.36-13.08,18.36-31.2Z"></path>
                                        <path class="cls-1"
                                              d="M200.58,25.44l-2.4,10.32h-.72c-2.64-1.8-5.76-2.88-8.28-2.88-3.24,0-6.36,1.8-9.6,6.36v37.08c0,7.68,.36,11.76,5.28,11.76v.72h-20.28v-.72c4.92,0,5.28-4.08,5.28-11.76V41.52c0-7.68-2.04-10.2-6.12-11.28v-.72l15.36-4.8h.48v12.84c4.92-7.56,10.2-13.08,16.32-13.08,1.44,0,3,.24,4.68,.96Z"></path>
                                        <path class="cls-1"
                                              d="M247.53,25.92h16.68v.72c-4.2,.72-6.72,5.4-11.76,18.72l-20.4,53.52c-4.8,12.48-11.16,18-18.48,18-2.16,0-3.96-.24-5.88-.84l.96-8.64h.72c7.2,6.24,15.72,4.32,20.16-7.68l4.44-11.76-18-47.76c-3.48-9.24-5.4-12.84-9.48-13.56v-.72h21.96v.72c-5.4,.48-5.52,4.32-3.36,10.32l13.92,37.68,11.4-30c4.8-12.6,2.88-17.4-2.88-18v-.72Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="top-right">
                            <p>我爱着雪菜</p>
                            <p>我无法对和纱说谎</p>
                        </div>
                    </div>
                    <div class="modal-img">
                        <div>
                            <img alt="" class="modal-img img" src="./img/酒鬼吉他手嘲笑.jpg" srcset="">
                        </div>
                        <div>
                            <img alt="" class="modal-img img" src="./img/小狐狸.jpg" srcset="">
                        </div>

                    </div>
                </div>
                <div class="modal-contents">
                    <div class="top">
                        <div class="top-left">
                            <h4>FEATURE #1</h4>
                            <svg class="top_title" data-name="レイヤー 2" id="_レイヤー_2" viewBox="0 0 264.21 116.88"
                                 xmlns="http://www.w3.org/2000/svg">
                                <g id="Story_text">
                                    <g>
                                        <path class="cls-1"
                                              d="M.72,84.96l-.72-18.36H.72c4.8,14.76,13.44,21.96,24,21.96,9.72,0,18.84-6.6,18.84-18.12s-8.64-15.84-18.96-21l-6-3C10.08,42.24,1.8,36.72,1.8,23.88,1.8,10.2,11.88,0,26.16,0c6.6,0,15.48,2.16,21.24,5.16v14.28h-.72C42,6.96,34.56,1.68,25.68,1.68,15.6,1.68,8.88,8.52,8.88,18.6s7.92,14.4,15,18l6,3c10.56,5.28,20.76,10.92,20.76,25.32s-11.04,25.32-27.36,25.32c-6.96,0-17.04-2.16-22.56-5.28Z"></path>
                                        <path class="cls-1"
                                              d="M95.31,79.08c-5.64,7.08-12.84,11.16-19.08,11.16-8.88,0-14.04-4.92-14.04-15.12V30.36h-6.24v-1.32l1.68-.72c5.88-2.52,10.08-7.32,13.56-18.12h.72v15.72h22.44l-1.68,4.44h-20.76v43.68c0,7.08,3.24,10.8,9.48,10.8,4.8,0,9.6-2.88,13.2-6.24l.72,.48Z"></path>
                                        <path class="cls-1"
                                              d="M99.29,57.6c0-19.92,12.48-33.12,29.28-33.12s28.92,12.48,28.92,32.64-12.48,33.12-29.16,33.12-29.04-12.48-29.04-32.64Zm47.64-.24c0-17.4-6.48-31.2-18.6-31.2s-18.48,13.08-18.48,31.2,6.6,31.2,18.72,31.2,18.36-13.08,18.36-31.2Z"></path>
                                        <path class="cls-1"
                                              d="M200.58,25.44l-2.4,10.32h-.72c-2.64-1.8-5.76-2.88-8.28-2.88-3.24,0-6.36,1.8-9.6,6.36v37.08c0,7.68,.36,11.76,5.28,11.76v.72h-20.28v-.72c4.92,0,5.28-4.08,5.28-11.76V41.52c0-7.68-2.04-10.2-6.12-11.28v-.72l15.36-4.8h.48v12.84c4.92-7.56,10.2-13.08,16.32-13.08,1.44,0,3,.24,4.68,.96Z"></path>
                                        <path class="cls-1"
                                              d="M247.53,25.92h16.68v.72c-4.2,.72-6.72,5.4-11.76,18.72l-20.4,53.52c-4.8,12.48-11.16,18-18.48,18-2.16,0-3.96-.24-5.88-.84l.96-8.64h.72c7.2,6.24,15.72,4.32,20.16-7.68l4.44-11.76-18-47.76c-3.48-9.24-5.4-12.84-9.48-13.56v-.72h21.96v.72c-5.4,.48-5.52,4.32-3.36,10.32l13.92,37.68,11.4-30c4.8-12.6,2.88-17.4-2.88-18v-.72Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="top-right">
                            <p>我爱着雪菜</p>
                            <p>我无法对和纱说谎</p>
                        </div>
                    </div>
                    <div class="modal-img">
                        <div>
                            <img alt="" class="modal-img img" src="./img/铸币.jpg" srcset="">
                        </div>
                        <div>
                            <img alt="" class="modal-img img" src="./img/小狐狸.jpg" srcset="">
                        </div>

                    </div>
                </div>
                <div class="modal-contents">
                    <div class="top">
                        <div class="top-left">
                            <h4>FEATURE #1</h4>
                            <svg class="top_title" data-name="レイヤー 2" id="_レイヤー_2" viewBox="0 0 264.21 116.88"
                                 xmlns="http://www.w3.org/2000/svg">
                                <g id="Story_text">
                                    <g>
                                        <path class="cls-1"
                                              d="M.72,84.96l-.72-18.36H.72c4.8,14.76,13.44,21.96,24,21.96,9.72,0,18.84-6.6,18.84-18.12s-8.64-15.84-18.96-21l-6-3C10.08,42.24,1.8,36.72,1.8,23.88,1.8,10.2,11.88,0,26.16,0c6.6,0,15.48,2.16,21.24,5.16v14.28h-.72C42,6.96,34.56,1.68,25.68,1.68,15.6,1.68,8.88,8.52,8.88,18.6s7.92,14.4,15,18l6,3c10.56,5.28,20.76,10.92,20.76,25.32s-11.04,25.32-27.36,25.32c-6.96,0-17.04-2.16-22.56-5.28Z"></path>
                                        <path class="cls-1"
                                              d="M95.31,79.08c-5.64,7.08-12.84,11.16-19.08,11.16-8.88,0-14.04-4.92-14.04-15.12V30.36h-6.24v-1.32l1.68-.72c5.88-2.52,10.08-7.32,13.56-18.12h.72v15.72h22.44l-1.68,4.44h-20.76v43.68c0,7.08,3.24,10.8,9.48,10.8,4.8,0,9.6-2.88,13.2-6.24l.72,.48Z"></path>
                                        <path class="cls-1"
                                              d="M99.29,57.6c0-19.92,12.48-33.12,29.28-33.12s28.92,12.48,28.92,32.64-12.48,33.12-29.16,33.12-29.04-12.48-29.04-32.64Zm47.64-.24c0-17.4-6.48-31.2-18.6-31.2s-18.48,13.08-18.48,31.2,6.6,31.2,18.72,31.2,18.36-13.08,18.36-31.2Z"></path>
                                        <path class="cls-1"
                                              d="M200.58,25.44l-2.4,10.32h-.72c-2.64-1.8-5.76-2.88-8.28-2.88-3.24,0-6.36,1.8-9.6,6.36v37.08c0,7.68,.36,11.76,5.28,11.76v.72h-20.28v-.72c4.92,0,5.28-4.08,5.28-11.76V41.52c0-7.68-2.04-10.2-6.12-11.28v-.72l15.36-4.8h.48v12.84c4.92-7.56,10.2-13.08,16.32-13.08,1.44,0,3,.24,4.68,.96Z"></path>
                                        <path class="cls-1"
                                              d="M247.53,25.92h16.68v.72c-4.2,.72-6.72,5.4-11.76,18.72l-20.4,53.52c-4.8,12.48-11.16,18-18.48,18-2.16,0-3.96-.24-5.88-.84l.96-8.64h.72c7.2,6.24,15.72,4.32,20.16-7.68l4.44-11.76-18-47.76c-3.48-9.24-5.4-12.84-9.48-13.56v-.72h21.96v.72c-5.4,.48-5.52,4.32-3.36,10.32l13.92,37.68,11.4-30c4.8-12.6,2.88-17.4-2.88-18v-.72Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="top-right">
                            <p>我爱着雪菜</p>
                            <p>我无法对和纱说谎</p>
                        </div>
                    </div>
                    <div class="modal-img">
                        <div>
                            <img alt="" class="modal-img img" src="./img/大脑过载.jpg" srcset="">
                        </div>
                        <div>
                            <img alt="" class="modal-img img" src="./img/小狐狸.jpg" srcset="">
                        </div>

                    </div>
                </div>
            </div>

            <!-- 导航栏大背景-->
            <div class="background-container">
                <svg class="wave" height="124.74" viewBox="0 0 1920 124.74" width="1920"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M1920,9.537s-247.678,53.14-530.6,53.14C1019.47,62.678,1019.47.888,649.537.888,312.453.888,282.509,52.187,0,61.3v64.326H1920v0"
                          data-name="wave_path"
                          fill="#e5eef6"
                          id="wave_path" transform="translate(0 -0.888)"/>
                </svg>
                <div class="wave-bgc"></div>
            </div>
            <div class="fv_scroll" style="color: grey;transition: opacity 2s ease;">
                <span style="margin-bottom: 1rem">SCROLL</span>
                <div class="scroll" style="background-color: grey"></div>
            </div>

        </div>
    </div>
</main>


<script>


    new Vue({
        el: '#app',
        data: function () {
            return {visible: false}
        }
    })

    const fv1 = document.getElementById('fv1');
    const fv1_source = document.getElementById('fv1_source');
    const fv2 = document.getElementById('fv2');
    const fv2_source = document.getElementById('fv2_source');
    const shutModalsButton = document.getElementById('shutModals');
    const loading = document.getElementById("loading");
    const wave_box = document.querySelector(".wave-box");
    const fv_text = document.querySelector(".fv_text");
    const nav_box = document.querySelector(".nav_box");
    const fv_img = document.querySelector(".fv_img");
    const fv_scroll = document.querySelector(".fv_scroll");
    const feature_modals = document.querySelector(".feature-modals");
    const nav = document.querySelector(".nav");
    const modalNav = document.querySelectorAll(".modal-nav a");
    const contentsContainer = document.querySelector(".contents-container");
    const modalContents = $(".modal-contents");
    let isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
        ? "mobile_web端页面" : "PC端页面"
    const menuButton = $('.menu_button')
    const menuButtonSpan = $('.menu_button span')
    const navBox = $('.main header .nav_box')
    const playTrailer = $('.playTrailer')
    const fv_rightArrowhead = $('.fv_rightArrowhead')
    const playTrailerText = $('.playTrailerText')
    const fvRightArrowheadContainer = $('#fv_rightArrowhead')
    const boxPlus = $('.buyNow-container .box-version-contents .right .right-item .title .plus')
    const boxSubtract = $('.buyNow-container .box-version-contents .right .right-item .title .subtract')
    const boxDescription = $('.buyNow-container .box-version-contents .right .right-item .description')
    const boxRightItem = $('.buyNow-container .box-version-contents .right .right-item')
    const isShowSubtract = [false, false, false, false]
    const buyNowPath = $('#Dlc-title g path')
    const AttentionA = $('.attention-a')
    const package3Node = $('.buyNow-container .package .box>div , .good-list')
    const extraNode = $('.extra>*')
    const DLCNode = $('.DLC>*')
    const StoryTextNode = $('.story .text >div')
    const StoryPath = $('.story svg>g>g')
    const StoryImg = $('.story-img,.more-btn')
    const DarkHour = $('.dark-hour>*')
    const CharacterContainer = $('.character-container')
    const SectionCharacter = $('section.character')
    const CharacterContainerLi = $('.character-container>li')
    const ImgLis = $('section.character .imgs li')


    //开启关闭注意事项的链接
    let isShowAttention = false;
    AttentionA.click(() => {
        isShowAttention = !isShowAttention
        if (isShowAttention)
            return $('.attention-ul').addClass('attention-ul-slide');
        $('.attention-ul').removeClass('attention-ul-slide')
    })

    //初始化滑动动画
    const downUpSlideAnimate = (nodeList, opt = {d: false, faster: false, slower: false}) => {
        //深层递归
        if (opt.d === true) {
            for (let i = 0; i < nodeList.length; i++) {
                //子元素计数
                let index = -1;
                for (const value of nodeList[i].childNodes.values()) {
                    index++;
                    //判断是否有div或g元素 有就递归

                    if (value.nodeName == 'div' || value.nodeName == 'g') return downUpSlideAnimate(nodeList[i])
                    const $v = $(value)
                    if (opt.faster) {
                        $v.addClass('slide-init-faster')
                        $v.css('transition-delay', 500 + index * 20 + 'ms')

                    } else if (opt.slower) {
                        $v.addClass('slide-init-slow')
                        $v.css('transition-delay', 600 + index * 80 + 'ms')
                    } else {
                        $v.addClass('slide-init-normal')
                        $v.css('transition-delay', 500 + index * 50 + 'ms')
                    }
                }

            }
            return
        }
        for (let i = 0; i < nodeList.length; i++) {
            if (opt.slower) {
                nodeList.eq(i).addClass('slide-init-slow')
                nodeList.eq(i).css('transition-delay', 600 + i * 100 + 'ms')
            } else {

                nodeList.eq(i).addClass('slide-init-normal')
                nodeList.eq(i).css('transition-delay', 500 + i * 50 + 'ms')
            }
        }

    }
    //滑动进入
    const downUpSlideAnimateIn = (nodeList, deep) => {
        //深层递归
        // if (deep === true) {
        //     for (let i = 0; i < nodeList.length; i++) {
        //         for (const value of nodeList[i].childNodes.values()) {
        //             //判断是否有div元素 有就递归
        //             if (value.nodeName == 'div') return downUpSlideAnimate(nodeList[i])
        //             const $v = $(value)
        //             $v.addClass('slide-in')
        //
        //         }
        //
        //     }
        //     return
        // }

        for (let i = 0; i < nodeList.length; i++) {
            nodeList.eq(i).addClass('slide-in')
        }
    }
    //开始元素划入动画
    const setAnimate = (Node, opt = {d: false, RCloseParentListToAll: false}) => {
        let referenceNode = Node.parent()
        if (opt.d === true) {
            //找到滑动元素的父Section元素
            let section = Node
            let notSection = section[0].nodeName != 'SECTION'
            while (notSection) {
                section = $(section.parent()[0])
                notSection = section[0].nodeName != 'SECTION'

                if (!notSection) break
            }
            referenceNode = section
        }
        //  rDivList >* mvn
        if (opt.RCloseParentListToAll === true) {
            for (let i = 0; i < Node.length; i++) {
                const $NI = $(Node[i])

                if ($NI.offset().top - $(window).scrollTop() < 450) {
                    downUpSlideAnimateIn($NI.children(), opt.d);
                }
            }
            return
        }
        //  rDivList >div 1v1
        if (opt.RCloseParentListSingle === true) {
            for (let i = 0; i < Node.length; i++) {
                const $NIItem = $(Node[i])
                if ($NIItem.parent().offset().top - $(window).scrollTop() < 450) {
                    downUpSlideAnimateIn($NIItem, opt.d);
                }
            }
            return
        }

        //  rDiv >*  1vn
        if (referenceNode.offset().top - $(window).scrollTop() < 500) {
            downUpSlideAnimateIn(Node, opt.d);
        }

    }
    //解决滑动至人物的第二个Li
    let inSecond = 0;
    //'91, 164, 215',//firstLi
    const colorArr = [
        '134,237,252', //protagonist
        '252,147,255',//Yukari
        '152,159,251',//Junpei
        '211,218,218',//Akihiko
        '246,140,168',//Mitsuru
        '149,245,220',//Fuuka
        '242,244,242',//Koromaru
        '250,246,166',//Aigis
        '250,186,128',//Ken
        '206,137,152',//Shinjiro
        '147,204,150',//secondLi
        '147,204,150',//secondLi
        '147,204,150'//secondLi
    ]
    //人物横向移动
    const characterScrollX = () => {
        // SectionCharacter.css('height', `${parseInt(CharacterContainer.css('width')) - 1903}px`)
        const itemWidth = parseInt(ImgLis.eq(0).css('width'))
        //横向滑动的距离
        let negaMovePx = SectionCharacter.offset().top - $(window).scrollTop() < 0 ? SectionCharacter.offset().top - $(window).scrollTop() : 0
        let posiMovePx = Math.abs(negaMovePx)
        //处于Li的索引
        let nowItem = Math.floor(posiMovePx / itemWidth)

        //是否处于横向移动Section
        let isOutTop = SectionCharacter.offset().top - $(window).scrollTop() > 20;
        let isOutBottom = Math.abs(SectionCharacter.offset().top - $(window).scrollTop()) > parseInt(SectionCharacter.css('height')) - $(window).height();
        //测试log


        // 人物移除吸附
        if (isOutTop || isOutBottom) {
            CharacterContainer.css('position', 'absolute')
            if (isOutTop) {

                CharacterContainer.css('transform', `translate(0px,0px)`)
            } else if (isOutBottom) {
                let movedLeft = parseInt(CharacterContainer.css('width')) - $(window).width()
                CharacterContainer.css('transform', `translate(${movedLeft},0px)`)

                CharacterContainer.css('top', 'auto')
                // CharacterContainer.css('right', `0`)
                CharacterContainer.css('bottom', `0`)

            }
            return
        }


        // 人物吸附
        if (SectionCharacter.offset().top - $(window).scrollTop() < 20) {

            CharacterContainer.css('position', 'fixed')
            CharacterContainer.css('top', '0')
            CharacterContainer.css('transform', `translate(${negaMovePx}px,0px)`)
            //按布局分割测试注释
            if (posiMovePx > 200) {
                CharacterContainer.css('background-color', `rgb(${colorArr[nowItem]})`)
            } else {
                CharacterContainer.css('background-color', `rgb(91, 164, 215)`)
            }
            //移除其他人物激活
            if (nowItem >= 10) {
                //背景色
                if (nowItem < 12)
                    return
                nowItem -= 2
                // if 背景色没有设置 return
            }

            CharacterContainerLi.find("li .img_on ").each(function () {
                $(this).removeClass('active')
            })
            //人物激活
            // console.log(CharacterContainerLi.find("li .img_on "))
            CharacterContainerLi.find("li .img_on ").eq(nowItem).addClass('active')
        }

    }

    //界面滑动触发
    $(window).scroll(() => {

        //BuyNow
        if ($('.buyNow-container').offset().top - $(window).scrollTop() < 500) {
            downUpSlideAnimateIn(buyNowPath);
            downUpSlideAnimateIn($('.buyNow-container .contents img,.box-version-contents'));
        }

        setAnimate(package3Node)
        setAnimate(extraNode)
        setAnimate(DLCNode)
        setAnimate(StoryTextNode, {d: false, RCloseParentListToAll: true})
        setAnimate(StoryPath, {d: false, RCloseParentListToAll: true});
        setAnimate(StoryImg, {d: false, RCloseParentListSingle: true})
        setAnimate(DarkHour)
        characterScrollX()
    })
    //动画初始化
    downUpSlideAnimate(buyNowPath);
    downUpSlideAnimate($('.buyNow-container .contents img,.box-version-contents'));
    downUpSlideAnimate(package3Node);
    downUpSlideAnimate(extraNode);
    downUpSlideAnimate(DLCNode);
    downUpSlideAnimate(StoryTextNode, {d: true, faster: false});
    downUpSlideAnimate(StoryPath, {d: true, faster: true});
    downUpSlideAnimate(StoryImg);
    downUpSlideAnimate(DarkHour, {slower: 123});

    // //人物移入高亮
    // ImgOffs.mouseenter((e) => {
    //     //显示
    //     $(e.target.nextElementSibling).css('opacity', '1')
    //     $(e.target.nextElementSibling).css('visibility', 'visible')
    //     //放大
    //     $(e.target.nextElementSibling).css('transform', 'scale(1.1)')
    // })
    // ImgOns.mouseout((e) => {
    //     //显示
    //     $(e.target).css('opacity', '0')
    //     $(e.target).css('visibility', 'hidden')
    //     //放大
    //     $(e.target).css('transform', 'scale(1)')
    // })
    //BuyNow盒装版详情展开收起
    const showDetail = (e) => {
        let {index, mode} = e.data
        isShowSubtract[index] = mode;

        boxPlus.eq(index).css('display', mode ? 'none' : 'block')
        boxSubtract.eq(index).css('display', mode ? 'block' : 'none')

        if (mode) {

            // boxRightItem.eq(index + 1).addClass('gtr')
            boxDescription.eq(index).addClass('gtr')
            // boxDescription.eq(index).css('display', 'block');
            return
        }
        // boxRightItem.eq(index + 1).removeClass('gtr')
        boxDescription.eq(index).removeClass('gtr')
        // boxDescription.eq(index).css('display', 'none');

    }
    for (let i = 0; i < 4; i++) {
        boxPlus.eq(i).click({index: i, mode: true}, showDetail)
        boxSubtract.eq(i).click({index: i, mode: false}, showDetail)
    }

    // 菜单显示隐藏
    let menuStatus = false;
    menuButton.click(() => {
        menuStatus = !menuStatus
        if (menuStatus) {

            navBox.fadeIn()
            // navBox.addClass('show')
            menuButtonSpan.eq(0).addClass('span_slide_down')
            menuButtonSpan.eq(1).addClass('span_hidden')
            return menuButtonSpan.eq(2).addClass('span_slide_up')
        }
        // navBox.removeClass('show')
        navBox.fadeOut()

        menuButtonSpan.eq(0).removeClass('span_slide_down')
        menuButtonSpan.eq(1).removeClass('span_hidden')
        menuButtonSpan.eq(2).removeClass('span_slide_up')


    })

    //移动端更换FV视频
    if (isMobile === 'mobile_web端页面') {
        fv1_source.src = '/mobile_fv_movie1.mp4'
        fv2_source.src = '/mobile_fv_movie2.mp4'
    }

    // 当前蒙版Tab索引
    let scrollIndex = 0;
    // PLAYTRAILER
    playTrailer.hover(() => {
        for (let i = 0; i < 2; i++) {
            playTrailerText.addClass('font-white')
            fvRightArrowheadContainer.addClass('move')
            fv_rightArrowhead.eq(i).css('stroke', '#FFF')
        }
    }, () => {
        for (let i = 0; i < 2; i++) {
            fv_rightArrowhead.eq(i).css('stroke', '#333')
            playTrailerText.removeClass('font-white')
            fvRightArrowheadContainer.removeClass('move')
        }
    })
    //入场加载
    window.onload = function () {
        setTimeout(() => {
            wave_box.classList.add('run');
            wave_box.addEventListener('transitionend', function (e) {
                if (e.propertyName === "transform") {
                    // loading开始消�?
                    loading.classList.add('disappear');
                }
                loading.addEventListener('transitionend', function (e) {
                    // 鬼太郎入水
                    fv1.play();
                    if (e.propertyName === "opacity") {
                        //loading彻底消失
                        loading.style.display = 'none';
                        fv_text.classList.add("slide_fv_text");
                        nav_box.classList.add("slide");
                        fv_img.classList.add("slide");
                        fv_scroll.classList.add("slide");
                        fv1.addEventListener('ended', (event) => {
                            fv1.style.opacity = '0';
                            //循环播放
                            fv2.play();
                        })
                    }
                })
            })
        }, 1000)
        //蒙版测试
        // ShowModalAnimate(true, 0)
        // $(`.feature-modals .modal-nav`).css('opacity', 1)
        // $(`.feature-modals .modal-nav`).css('top', 0)
        setTimeout(() => {

        }, 5000)
    }
    //关闭蒙版
    shutModalsButton.addEventListener('click', (e) => {
        ShowModalAnimate(false, 0, 'all')
        feature_modals.classList.remove('open');
    })
    // 开启蒙版动画方法
    const ShowModalAnimate = (isNot, index, mode) => {
        let opacity = isNot ? '1' : '0';
        let top = isNot ? '0' : '-1rem';

        if (mode === 'all') {

            $('.modal-contents')[scrollIndex].style.opacity = opacity
            $('.modal-contents .top')[scrollIndex].style.top = top
            $('.modal-contents .top')[scrollIndex].style.opacity = opacity
            for (let j = 0; j < 2; j++) {
                $(`.modal-contents:nth-child(${scrollIndex + 1}) .modal-img > div`)[j].style.top = top
                $(`.modal-contents:nth-child(${scrollIndex + 1}) .modal-img > div`)[j].style.opacity = opacity
            }
            $('.feature-modals .fv_scroll').css('opacity', opacity)
            $(`.feature-modals .modal-nav`).css('opacity', opacity)
            $(`.feature-modals .modal-nav`).css('top', '1rem')
            return scrollIndex = 0;

        }
        if (!isNot) {
            return $('.modal-contents')[index].style.opacity = opacity
        }
        //蒙版的标题
        //开始进入
        $('.modal-contents')[index].style.opacity = opacity
        $('.modal-contents .top')[index].style.top = top
        $('.modal-contents .top')[index].style.opacity = opacity
        $('.feature-modals .fv_scroll').css('opacity', opacity)
        $(`.feature-modals .modal-nav`).css('opacity', 1)
        $(`.feature-modals .modal-nav`).css('top', 0)
        //选取到蒙版中的两个图片
        //开始排队进入
        for (let j = 0; j < 2; j++) {
            $(`.modal-contents:nth-child(${index + 1}) .modal-img > div`)[j].style.top = top
            $(`.modal-contents:nth-child(${index + 1}) .modal-img > div`)[j].style.opacity = opacity
        }


    }

    // 开启蒙版
    nav.addEventListener('click', (e) => {
        feature_modals.classList.add('open');
        //
        //    蒙版导航事件初始化
        for (let i = 0; i < 4; i++) {
            modalNav[i].addEventListener('click', (e) => {
                for (let i = 0; i < 4; i++) {
                    modalNav[i].classList.remove('select');
                }

                e.target.classList.add('select');
            })
        }

        //   蒙版内部动画
        setTimeout(ShowModalAnimate, 1000, true, 0)

    })


    //給蒙版内容设置动画
    for (let i = 0; i < 4; i++) {
        modalNav[i].addEventListener('click', (e) => {
            for (let i = 0; i < 4; i++) {
                modalNav[i].classList.remove('select');
            }
            e.target.classList.add('select');
            ShowModalAnimate(false, scrollIndex)
            scrollIndex = i;
            setTimeout(ShowModalAnimate, 500, true, scrollIndex)

        })
        //蒙版的标题
        //延迟进入
        $('.modal-contents .top')[i].style.setProperty('transition-delay', `calc(200ms + ${0} * 60ms)`)
        //选取到蒙版中的两个图片
        //延迟进入
        for (let j = 0; j < 2; j++) {
            $(`.modal-contents:nth-child(${i + 1}) .modal-img > div`)[j].style.setProperty('transition-delay', `calc(200ms + ${j + 1} * 200ms)`)
        }
    }


    // 防抖动函数
    function debounce(func, wait, immediate) {
        let timeout;
        return function (e) {
            let context = this, args = arguments;
            let later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            let callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

    const myEfficientFn = debounce(function (e) {
        // $('.feature-modals .contents-container .modal-contents')[scrollIndex].style.opacity = '0';
        //当前导航取消选择
        modalNav[scrollIndex].classList.remove('select')
        ShowModalAnimate(false, scrollIndex)
        //朝上还是朝下滚动
        e.deltaY > 0 ? scrollIndex++ : scrollIndex--;
        if (scrollIndex > 3 || scrollIndex < 0)
            scrollIndex = 0;
//选择下一个导航
        modalNav[scrollIndex].classList.add('select')
        setTimeout(ShowModalAnimate, 500, true, scrollIndex)

        // console.log(1)
    }, 500);

    contentsContainer.addEventListener('wheel', myEfficientFn);

</script>
</body>
</html>
